이미지 위치를 반응 적으로 만드시겠습니까?

Question

부트 스트랩을 사용하여 작은 웹 사이트를 만들고 있습니다. 중단되었습니다. 이 두 이미지를 navbar의 양쪽에 추가하고 싶지만 위치를 반응 적으로 만드는 방법을 알 수는 없습니다. 다음은 한 브라우저 크기로 작업하는 예제입니다. 그것은 다른 크기 때

Working

그러나, 다음 이미지는 다음과 같이보고 시작합니다.

Not Working

나는이가 설정된 위치에 설정으로 내가 사용하는 코드 일 것이다라는 것을 알고 있었다. 나는 이것을하는 다른 (더 나은) 방법을 생각할 수 없다. 여기에 내가 처음에이 위치에 올 때 사용했던 CSS가 있습니다.

#wrap-left { 
    position: absolute; 
    visibility: visible; 
    left: -5px; 
    top: 61px; 
    z-index: 200; 
} 

#wrap-right { 
    position: absolute; 
    visibility: visible; 
    left: 705px; 
    top: 61px; 
    z-index: 200; 
} 

그리고 여기에 사전에 이미지

 <div id="wrap-left"> 
      <img src="assets/img/wrap-left.png"> 
     </div> 

     <div id="wrap-right"> 
      <img src="assets/img/wrap-right.png"> 
     </div> 

감사에 대한 HTML입니다.

편집 : 백분율을 사용하면 훨씬 더 좋지만 완벽하지는 않습니다.

EDIT : 나중에 컴퓨터에 접속할 때 @media 쿼리로 어지럽 힙니다. 바라기를 그것은 나의 대답이다.

Answer 1

내 문제에 대한 해결책을 찾았습니다. 내가해야 할 일은 특정 화면 크기에 대해 내 CSS에서 @media 쿼리를 사용하는 것이 었습니다. 이것은이 문제를 해결하기 위해 사용했던 코드입니다. 나는 이미지가이 ID의 사용 및 다른 화면을 제공 할 것 위치를 변경 할 수 있었다 특정 화면 크기에 대한 이러한 미디어 쿼리를 사용하여

@media only screen 
and (max-width : 767px) { 
    #wrap-left { 
     display: none; 
    } 
    #wrap-right { 
     display: none; 
    } 
} 

@media only screen 
and (min-width : 992px) { 
    #wrap-left { 
    position: absolute; 
    visibility: visible; 
    left: -5px; 
    top: 81px; 
    z-index: 200; 
} 
    #wrap-right { 
    position: absolute; 
    visibility: visible; 
    left: 925px; 
    top: 81px; 
    z-index: 200; 
} 
} 

@media only screen 
and (min-width : 1200px) { 
    #wrap-left { 
    position: absolute; 
    visibility: visible; 
    left: -5px; 
    top: 89px; 
    z-index: 200; 
} 
    #wrap-right { 
    position: absolute; 
    visibility: visible; 
    left: 1125px; 
    top: 89px; 
    z-index: 200; 
} 
} 


@media only screen 
and (min-width : 1824px) { 
    #wrap-left { 
    position: absolute; 
    visibility: visible; 
    left: -5px; 
    top: 89px; 
    z-index: 200; 
} 
    #wrap-right { 
    position: absolute; 
    visibility: visible; 
    left: 1125px; 
    top: 89px; 
    z-index: 200; 
} 
} 

는 이미지를 넣어 다른 장소 크기. 그러나 특정 시점에서 페이지가 작아지면 페이지가 축소되기 시작하므로 정확한 시점에서 이미지를 제거합니다.