Question

我如何通过此网站http://www.theqcamera.com或http://plugandplaydesign.co.uk（顶部的视频+图片）看到效果，以便图片以任何屏幕尺寸填充屏幕。我不确定这是否是响应高度，但我真的想知道如何做到这一点。

Answer 1

有几种方法可以做到这一点。最简单的是在CSS中使用vh（垂直高度）。设置为100vh将使div成为用于查看页面的屏幕高度的100％。将其与设置为＆＃34;覆盖＆＃34;的背景图像相结合。在域名上有100％的宽度，你应该很高兴。

<body>
   <div class="container">
       <div class="div_1">
           content
       </div>
       <div class="div_2">
           other content
       </div>
   </div>
</body>

.div_1 {
    width: 100%;
    height: 100vh;
}
.div_2 {
    width: 100%;
    height: auto;
}

请注意：IE8不支持vh。如果您需要为您的项目支持IE8，请使用position：absolute;高度：100％;宽度：100％;保证金：0;是一个稍微复杂但更向后兼容的答案。

Answer 2

尝试使用高度100％，位置绝对，边距0自动这就是我在我的网站（http://www.dotto.be）

上100％制作我的照片的方式

填满整个屏幕响应高度

2 个答案: