CODEWITHSUNDEEP
phphtmlcss
Rain
Rain

Reputation: 259

Fullscreen image width in img-tag

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;
}

Upvotes: 0

Views: 328

Answers (1)

Cedric Cholley
Cedric Cholley

Reputation: 2043

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>

Upvotes: 2

Related Questions