全屏背景图像会影响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视口单元。

{{1}}

Browser support没问题，除了IE。