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

Question

我有以下问题：我的网站有一个全屏图像滑块，它是响应式的。图像大小始终适应窗口大小。我的解决方案如下：

.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 Viewport Unit。

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

浏览器支持还可以，除了 IE。