"반응 형 이미지를 통한 반응 이미지"- Twitter 부트 스트랩

Question

나는 이것을 고치려고합니다 :

나는 반응 형 디자인을 위해 Twitter 부트 스트랩을 사용하고 있습니다. 주요 콘텐츠 ("친척"으로 위치)의 반응이 빠른 배경 그림으로 큰 그림이 있고 탐색자로 일하고있는 사진이 몇 개 더 있습니다 - 위치가 매우 무작위입니다 (그리드 나 이와 유사한 것이 없습니다) :

HTML

<div class="container"> 
    <div class="row-fluid">  
     <div class="span12"> 
      <div id="LARGE_PICTURE"> 
       <img src="img/LARGE_PICTURE.png"> 
       <a href="#"> 
        <img id="SMALL_PICTURE_1" src="SMALL_PICTURE_1.png"> 
       </a> 
       <a href="#"> 
        <img id="SMALL_PICTURE_2"src="SMALL_PICTURE_2.png"> 
       </a> 
       <a href="#"> 
        <img id="SMALL_PICTURE_3" src="SMALL_PICTURE_3.png"> 
       </a> 
       <a href="#"> 
        <img id="SMALL_PICTURE_4" src="SMALL_PICTURE_4.png"> 
       </a> 
      </div> 
     </div>   
    </div> 
</div> 

CSS

@import url('css/bootstrap.css'); 
@import url('css/bootstrap-responsive.css'); 
.container { 
    background-image: url("img/bg.png"); 
} 
#LARGE_PICTURE { 
    position: relative; 
} 
#SMALL_PICTURE_1 { 
    position:absolute; 
    left:21%; 
    top:24%; 
} 
#SMALL_PICTURE_2 { 
    position:absolute; 
    left:30%; 
    top:13%; 
} 
#SMALL_PICTURE_3 { 
    position:absolute; 
    left:48%; 
    top:26%; 
} 
#SMALL_PICTURE_4 { 
    position:absolute; 
    left:63%; 
    top:16%; 
} 

큰 그림은 완벽하게 작동합니다 - 그것은 반응이다. 그러나 더 작은 사진을 반응 적으로 만드는 방법이 있습니까? 그들의 크기는 화면 해상도에 따라 지금 바뀌고 있습니다 ... 많은 팁을 주셔서 감사합니다!

Answer 1

위치 절대 + 응답 = 두통.

각 미디어 쿼리에 대해 #SMALL_PICTURE_X {}를 모두 다시 지정해야합니다.

또한 앵커 내에 포함 된 이미지를 배치하지만 실제 앵커 태그로는 작업하지 않으므로 HTML 디자인이 실패합니다.

부트 스트랩 그리드 시스템을 이해하려면 to v3 documentation 또는 v2 documentation이 될 수 있습니다.

/* Large desktop */ 
@media (min-width: 1200px) { 
    #SMALL_PICTURE_1 { 
     position:absolute; 
     left:21%; 
     top:24%; 
     width:SET_A_WIDTH; 
     height:SET_A_HEIGHT; 
    } 
    #SMALL_PICTURE_2 { 
     position:absolute; 
     left:30%; 
     top:13%; 
     width:SET_A_WIDTH; 
     height:SET_A_HEIGHT; 
    } 
    #SMALL_PICTURE_3 { 
     position:absolute; 
     left:48%; 
     top:26%; 
     width:SET_A_WIDTH; 
     height:SET_A_HEIGHT; 
    } 
    #SMALL_PICTURE_4 { 
     position:absolute; 
     left:63%; 
     top:16%; 
     width:SET_A_WIDTH; 
     height:SET_A_HEIGHT; 
    } 
} 

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { 
    #REPEAT_WHAT'S_BEEN_DONE_PREVIOUSLY { 
    /* BY_POSITIONNING and SETTING_HEIGHT_AND_WIDTH */ 
    } 

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 

/* Landscape phones and down */ 
@media (max-width: 480px) { ... }