如何使用 css 和 vh 将我的标题图像设置为我的视口的 100%答案

【问题标题】：How to set my header image as 100% of my view-port with css and vh如何使用 css 和 vh 将我的标题图像设置为我的视口的 100%
【发布时间】：2020-12-21 21:44:15
【问题描述】：

我正在使用带有 Elementor（Hello 主题）的 WordPress，

我想做什么：将我的标题图像设置为我的视口的 100% 与 VH 单元。

我希望它看起来如何 - https://ibb.co/0MQv2dZ。我的结果不起作用。我错过了什么？（查看我的网站）

链接：https://wordpress-288516-1301271.cloudwaysapps.com/example//

谢谢！

【问题讨论】：

标签： html css wordpress responsive-design elementor

【解决方案1】：

好的，你要问的是：

HTML

<div class="full-screen-img">
   <img src="https://wordpress-288516-1301271.cloudwaysapps.com/wp-content/uploads/2020/09/Lirz-Cover.jpg" alt="image">
</div>

.full-screen-img {
   height: 100vh;
   width: 100%;
}

但是，如果您看起来像示例，则需要考虑一些事项

HTML

<div class="full-img-container">
   <img class="full-img" src="https://wordpress-288516-1301271.cloudwaysapps.com/wp-content/uploads/2020/09/Lirz-Cover.jpg" alt="image">
</div>
<div>
  other content
</div>

.full-img-container{
    margin: auto;
    height: 40em;
    /*
     *image height will scale automatically base on the width
     * so you can make it resposive easylly with the column classes
     * available in bootstrap for example or adding media queires to change
     * width % base on viewport current with
     */
    width: 50%; 
}

.full-img {
 max-height: 100%;
 width: 100%;
}

【讨论】：

【解决方案2】：

谢谢。是的 - 现在图像是从视口看 100VH。但是现在当我缩小窗口时，它没有响应，质量会降低。我怎样才能保持相同的质量？

body{
    margin:0;
    padding:0;
}

.full-img-container {
   height: 100vh;
   width: 100%;
}

.full-img {
 max-height: 100%;
 width: 100%;
}

<html>
<head>
</head>

<body>

<div class="full-img-container">
    <img  class="full-img" src="https://wordpress-288516-1301271.cloudwaysapps.com/wp-content/uploads/2020/09/Lirz-Cover.jpg" alt="image">
 </div>
 
</body>
 </html>

【讨论】：