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