CODEWITHSUNDEEP
htmlcssimage
Alex Wetton
Alex Wetton

Reputation: 197

how to get a image to be either the full browser width or height depending on which is smaller

I have a square image which I want to fill as much of the users browser as possible without overflow. The problem is that on some devices the width is greater than the height and vice versa. Therefore if I set width as 100% then on some devices this will cause a height overflow. So how can I set the image to load as a square and be 100% width, if the width is smaller than the height and 100% height, if the height is smaller than the width? Thanks

Upvotes: 0

Views: 38

Answers (2)

Xahed Kamal
Xahed Kamal

Reputation: 2223

You can make an image to take full width and height using this - 

 img{
      min-width: 100vw;
      min-height: 100vh;
 }

Upvotes: 1

sdvnksv
sdvnksv

Reputation: 9678

You can use the vmin value:

http://jsfiddle.net/bt2s86vu/

<div></div>    

div {
    width: 100vmin;
    height: 100vmin;
    background: green;
}

Note, that in IE9 you need to use vm instead on vmin: http://caniuse.com/#feat=viewport-units

Upvotes: 1

Related Questions