全屏背景图像影响 div 大小和其他内容

Question

我遇到以下问题：我的网站上有一个响应式全屏图像滑块。图像大小始终适应 window 大小。我的解决方案如下：

.picture {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    background-position: center center;
    position: relative;
    overflow: hidden;
    min-width: 100%;
}

<div class="owl-carousel slides">
    <div class="slide">
        <div class="picture" style="background-image: url('myURL')"></div>
    </div>
</div>

问题是在加载页面时，您可以在滑块位置看到页面的其他内容。原因是页面加载时图片容器没有宽度。宽度是根据图像宽度计算的。为了更好地理解：我正在加载页面，然后有一小会儿我可以在顶部看到 div 内容，然后加载滑块，内容位于滑块下方应有的位置。

有人有解决办法吗？

提前致谢！

Answer 1

您可以尝试 CSS3 视口单元。

.picture {
    width: 100vh;
    height: 100vh;
}

Browser support 没问题，IE除外。

全屏背景图像影响 div 大小和其他内容

Full screen background-image influences div size and other content

html

css

background-image

background-size