Javascript 如何使一个div具有多个图像？

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

我做了这把小提琴让你明白：

我的代码是：

html

---

如果您想要的是一个包含始终根据当前访问设备的屏幕大小进行调整的

，您可以使用

可用高度
和
$（窗口）。resize（）
如下所示：

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

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

引导常用断点：

下面的粗略示例或实时示例链接：（调整JSFIDLE示例上的示例窗口大小）

html

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

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

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

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

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