img-tag 中的全屏图像宽度

Question

I'm using PHP snippet to add a simple image to top of my page, and now I'm trying to have it fullscreen (edge to edge).

Yet no matter what CSS I try, it never seems to work.

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');

And CSS is following:

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

Answer 1

From what you're showing us your image has a width and height of auto . Apply to your image width: 100vw and height: 100vh . See example below

 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>