「Responsive image over response image」 - Twitter Bootstrap

Question

我正在嘗試修復此問題：

我正在使用Twitter Bootstrap進行響應式設計。有一張大圖片作爲主要內容的響應背景圖片（定位爲「相對」），並且有幾張圖片作爲導航器工作 - 它們的位置非常隨機（沒有網格或類似的東西） ：

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。

我相信你的情況是第2版，所以你將不得不做這樣的事情：

/* 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) { ... }