Avoid stretch on image css

Question

I am rendering an image into a div. I want to avoid stretching of my image.

div {   height: 300px;   width: 300px;  } img {   min-width: 300px;   min-height: 300px;   max-height: 300px;    } 

My problem is that my image's width stretches. I want it to have the regular width even though parts of the image will be missing.

div {   height: 300px;   width: 300px;    overflow: hidden; } img {   height: 300px   max-width: none;   min-width: 300px; } 

Answer 1

You can achieve this with simply adding object-fit: cover;. An example might be like -

img {     height: 300px     width: 100%;     object-fit: cover; } 

Answer 2

I would forget setting the min-height and the max-height. Just set the height to be 300 pixels and put an overflow hidden on the div tag. That way no matter what the image size it will always stay in proportion and never go outside the boundaries of your div tag.

div { height: 300px; width: 300px; overflow: hidden; } img { height: 300px; }