CODEWITHSUNDEEP
htmlcss
DevJoe
DevJoe

Reputation: 443

Prevent stretching of an image while keeping dimensions

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="">

Upvotes: 0

Views: 107

Answers (3)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

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

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

DEMO

Upvotes: 0

sideroxylon
sideroxylon

Reputation: 4416

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>

Upvotes: 2

Puka
Puka

Reputation: 1575

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.

Upvotes: 0

Related Questions