CODEWITHSUNDEEP
htmlcssaspect-ratio
Rewind
Rewind

Reputation: 2814

CSS - Image Full Screen, but will maintain aspect ratio

How do I get an image to fill the full screen (note there is stuff below it - think of it as a header in a page that fills the whole screen) but maintains its aspect ratio, either overspilling on the width or oversplilling on the height.

I thought it would be:

<img class="w3-image" src="./images/img1.jpg" style="min-width:100vw; max-height:100vh; background-position: center; background-repeat: no-repeat;" />

But that does not work. The aspect ratio fails.

Upvotes: 0

Views: 2335

Answers (2)

Kuba Wojtach
Kuba Wojtach

Reputation: 566

Basically you may use 

background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
min-width: 100vh;

http://codepen.io/powaznypowazny/pen/apeVXg

Hope it helps :)

Upvotes: 0

jezmck
jezmck

Reputation: 1149

Insert it as a background to an element instead, with background-size: cover; and the element with height: 100vh.

Upvotes: 2

Related Questions