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

Question

我正在做一个滑块，我的想法是制作一个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;
}

Answer 1

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

引导程序常用断点： 引导程序3断点和媒体查询

下面的可出售示例或实时示例链接： 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;
    }
}

Answer 2

如果您所追求的是一个包含<div> ，该内容始终会调整为当前访问设备的屏幕尺寸，则可以使用availHeight和$( window ).resize()如下所示：

$( window ).resize(function() {
    var screenHeight = window.innerHeight;
    $('#yourdiv').css('height', screenHeight); 
});