img-tag中的全屏图像宽度

Question

我正在使用PHP代码片段在我的页面顶部添加一个简单的图像，现在我正在尝试让它全屏显示(边缘到边缘)。

然而，无论我尝试什么CSS，它似乎从来都不起作用。

function add_custom_content(){ ?>
  <?php if ( is_home() ) : ?>
    <div class="custom-content x-container max width headerhero">
         <img src="...x.jpg" alt="X.com" /> 
    </div>
  <?php endif; ?>
<?php }
add_action('x_before_view_global__index', 'add_custom_content');

CSS如下：

.headerhero { 
min-height:100%;
min-width:100%;
height:auto;
width:auto;
margin:auto;
object-fit: cover;
}

Answer 1

根据您向我们展示的内容，您的图像具有auto的width和height。应用于您的镜像width: 100vw和height: 100vh。参见下面的示例

​

body, div {
  margin: 0;
  padding: 0;
}

img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

<div>
  <img src="https://picsum.photos/2000" alt="a random image">
</div>

​