Prevent stretching of an image while keeping dimensions

Question

Is there a way to prevent the stretching of an image, to crop it somehow but keep the dimensions..?

img {
  width: 90px;
  height: 120px;
}

<img src="https://i.pinimg.com/736x/d4/c3/dc/d4c3dc946ae1e087d24def574215e266--image-search-google-search.jpg" alt="">

score 2 · Answer 1 · answered Nov 15 '17 at 11:19

2

If you want to make the image fit a defined container with fixed dimensions, you can use object-fit:cover:

div {
  height: 120px;
  width: 90px;
}

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

<div>
  <img src="https://i.pinimg.com/736x/d4/c3/dc/d4c3dc946ae1e087d24def574215e266--image-search-google-search.jpg" alt="">
</div>

answered Nov 15 '17 at 11:19

sideroxylon

Thanks, I was thinking about using this property but it's not working in IE, is there something other way that you're aware of? – DevJoe Nov 15 '17 at 11:27
https://stackoverflow.com/questions/37792720/ie-and-edge-fix-for-object-fit-cover – Jamie Barker Nov 15 '17 at 11:57

score 0 · Answer 2 · answered Nov 15 '17 at 11:16

0

To keep the exact same dimensions of this image you should only set one of the two dimensions. The other one will automatically be calculated:

img {
  width: 90px;
  /*height: 120px;*/
}

<img src="https://i.pinimg.com/736x/d4/c3/dc/d4c3dc946ae1e087d24def574215e266--image-search-google-search.jpg" alt="">

Hope I helped out.

answered Nov 15 '17 at 11:16

Puka

score 0 · Answer 3 · answered Nov 15 '17 at 11:24

0

Instead of using width and height, use max-width and max-height.

img {
  max-width:90px;
  max-height:120px;
}

answered Nov 15 '17 at 11:24

Suresh Ponnukalai

3 Answers3