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

Question

我正在做一个 slider ，我的想法是制作一个 div，并将 4 个图像放入其中。图像将一个堆叠在另一个之上(position:absolute)，宽度:1013 像素，最大宽度:100%，高度:自动(响应)。问题是，如果不给父 div 一个高度，我无法 overflow hidden ，但如果我这样做，当屏幕很小时，高度将是相同的，所以你可以看到，例如，第二张图片的一半。

我做了这个 fiddle 是为了让你理解:

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;
}

Answer 1

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

Bootstraps常用断点: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;
    }
}