“响应式图像优于响应式图像” - 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) { ... }