Question

（请记住，我不熟悉代码）

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

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

如何让皇家滑块的父DIV根据滑块的高度动态改变高度（根据滑块的宽度，它本身是动态的）？

编辑（在ncardeli的回答之后）我得到了这段代码，我找到了工作。它获取滑块div的高度（具有位置的那个：绝对值）并给出包含div的高度。

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

我的问题是，如果浏览器改变大小，它不会刷新。我怎样才能做到这一点？

Answer 1

使用vw unit和calc，使用纯CSS的解决方案可行。

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

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

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

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

点击此处查看浏览器支持：

Calc ：http://caniuse.com/#feat=calc
vw unit ：http://caniuse.com/#feat=viewport-units

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

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

具有动态高度和绝对位置的子DIV - 为父DIV提供高度

1 个答案: