javascript - 如何使具有多个图像的div响应？

我正在做一个滑块，我的想法是制作一个div，并放入4张图像中。图像将堆叠在另一个之上（位置：绝对），并且宽度：1013px，最大宽度：100％，高度：自动（要响应）。问题是，如果不给父div设置高度，我就无法隐藏溢出，但如果这样做，当屏幕较小时，高度将是相同的，因此您可以看到例如第二张图片的一半。

我做了这个小提琴供您理解：

http://jsfiddle.net/bS69a/

而我的代码：

html

<div class="slider">
    <img src="http://k40.kn3.net/4/2/2/9/D/8/593.jpg" alt="slider" />
    <img src="http://k32.kn3.net/1/0/C/9/6/1/D4F.jpg" alt="slider" />
</div>

的CSS

.slider{
    margin: auto;
    width: 90%;
    text-align: center;
}

.slider img{
    width: 100%;
    max-width: 600px;
}

最佳答案

媒体查询和断点可能会有所帮助。

引导程序常用断点：Bootstrap 3 breakpoints and media queries

下面的示例或实时示例链接：http://jsfiddle.net/bA7wx/（在jsfiddle示例上调整示例窗口大小）

html

<div class="slider">
    <img src="#url" alt="slider" />
    <img src="#url" alt="slider" />
    <img src="#url" alt="slider" />
    <img src="#url" alt="slider" />
</div>

的CSS

.slider{
    width; 100%
    height: auto;
}

.slider img{
    width: 24%;
}

@media (max-width: 992px) {
    .slider img{
        width: 48%;
    }
}

@media (max-width: 768px) {
    .slider img{
        width: 48%;
    }
}

@media (max-width: 480px) {
    .slider img{
        width: 90%;
        margin; 0 auto;
    }
}