Javascript 具有动态高度和绝对位置的子DIV-为父DIV指定高度

请记住我不懂代码

我希望图像滑块拉伸到浏览器的全宽。该网站的主题使用了一些响应代码，因此滑块的父DIV宽度不能设置为100%

因此，解决方案是“定位：绝对”，以使滑块适合100%的浏览器宽度。但是，当我这样做时，浏览器不知道滑块的内容有多高，因此网站的下一部分最终会向上移动并被滑块覆盖

如何使Royal Slider的父DIV根据滑块的高度动态更改高度，而滑块本身是基于其宽度的像素数动态更改的

在ncardeli的回答后编辑 我找到了这段代码。它获取滑块div的高度，即具有position:absolute的滑块div的高度，并给出包含div的滑块div的高度

$(document).ready(function(){
    var x = $('#new-royalslider-1').height();
    $('.photographySlider').css('height', x);
})

---

我的问题是，如果浏览器更改大小，它不会刷新。如何实现这一点？

使用和，使用纯CSS的解决方案可能是可行的

您应该将滑块的宽度设置为100vw，并将其相对定位

#new-royalslider-1 {
    background-color: black;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    position: relative;
    width: 100vw !important;
}

然后，您应该为每个断点设置一个规则，将left设置为一个计算值。计算出的值是将容器宽度减去视口宽度和左侧填充的值得出的：

@media (min-width: 768px) {
    #new-royalslider-1 {
        left: calc((750px - 100vw) / 2 - 15px);
    }
}

@media (min-width: 992px) {
    #new-royalslider-1 {
        left: calc((970px - 100vw) / 2 - 15px);
    }
}

@media (min-width: 1200px) {
    #new-royalslider-1 {
        left: calc((1170px - 100vw) / 2 - 15px);
    }
}

检查此处以获取浏览器支持：

计算：

大众汽车公司：

如果您喜欢Javascript解决方案，此脚本将执行以下操作：

$(window).on('resize', function (){
    $('.photographySlider').height($('#new-royalslider-1').height());
})

---

感谢您提供的解决方案，但我更希望通过使用jquery或其他方式获得完全的浏览器支持。@Inazuma，我编辑了答案，使用jquery包含了一个Javascript解决方案。调用我在$document.ready上的答案中发布的相同函数