CODEWITHSUNDEEP
javascriptjquerycssimageresponsive-design
user2521295
user2521295

Reputation: 901

Making images respond to browser resize with both width and height

I have been trying to make images resize proportionally, leaving whitespace, so they are always fully seen in the browser window without having to scroll. All of the solutions I have found so far can resize the image based on the browser window width, but if the proportions of the browser window don't match the image, then it will cut off the image and the user will have to scroll down to see the rest. I know that there is also background-size: cover; but I don't want the image to be clipped. Any ideas?

Upvotes: 0

Views: 562

Answers (2)

Tigt
Tigt

Reputation: 1477

You want the object-fit: contain property if you're using <img>, or background-fit: contain if it's a CSS background-image.

http://codepen.io/robinrendle/pen/BywNVX

object-fit doesn't have perfect browser support, but there is a polyfill for it.

Upvotes: 0

Edward Ploy
Edward Ploy

Reputation: 395

You can try vh and vw units in CSS. And accaptable by almost all browsers.

img{width:vw;height:vh;}

The drawback is image may shrink... So you can try with overflow hidden. 

img{width:vh;height:vh;overflow:hidden;position:center;}

Upvotes: 1

Related Questions