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

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

Bootstraps常用的断点：Bootstrap 3 breakpoints and media queries

下面的Rought示例或实例示例链接：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()，如下所示：< / p>

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

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

2 个答案: