CSS image resize issue

css, html, image

Solution

If you do not want your images to stretch out, you should pin down one dimension and allow the other dimension as `auto`. (this preserves the aspect ratio of the image)

See the example below where `width` is kept constant while `height` auto-adjusts:

img {
  display: block;
}
.correct,
.incorrect {
  border: 1px solid red;
  display: inline-block;
}
.incorrect img {
  max-width: 100%;
  width: 100px;
  height: 100px;
}
.correct img {
  max-width: 100%;
  width: 200px;
  height: auto;
}

<div>This one stretches out:</div>
<div class="incorrect">
  <img src="https://via.placeholder.com/150x50" />
</div>

<div>This will preserve aspect ratio and look right:</div>
<div class="correct">
  <img src="https://via.placeholder.com/150x50" />
</div>

See the example below where `height` is kept constant while `width` auto-adjusts:

img {
  display: block;
}
.correct,
.incorrect {
  border: 1px solid red;
  display: inline-block;
}
.incorrect img {
  max-height: 100%;
  height: 100px;
  width: 100px;
}
.correct img {
  max-height: 100%;
  height: 200px;
  width: auto;
}

<div>This one stretches out:</div>
<div class="incorrect">
  <img src="http://placehold.it/150x50" />
</div>

<div>This will preserve aspect ratio and look right:</div>
<div class="correct">
  <img src="http://placehold.it/150x50" />
</div>

Problem

I have a problem when resizing images I have set up in admin panel. ``` .users-list>li img { border-radius: 50%; max-width: 100%; height: auto; width: 100px; height: 100px; } ``` When maximized, the images are looking great: If I however resize browser, they all shrink together: And then I tried by deleting the `height: 100px` property which seems to do the trick, but one image is for some reason off:

Original source