CSS image resize issue

Question

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:

using `max-height:100px;` and `max-width:100px;` instead of `height:100px;` and `max-width:100%;` ? — Sebastian Brosch, Sep 02 '16 at 09:58

score 4 · Accepted Answer · edited Jan 20 '22 at 07:46

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>

This makes a lot of sense...then my formatting is as good as it gets. Back-end needs to retrieve same dimension images in order to do what I want — Norgul, Sep 02 '16 at 10:20

score 0 · Answer 2 · answered Sep 02 '16 at 10:08

0

Just remove

height: 100px;

i.e

.users-list>li img {
    border-radius: 50%;
    max-width: 100%;
    height: auto;
    width: 100px;
}

answered Sep 02 '16 at 10:08

Vinay Dhakre

41
7

That gives me the 3rd picture result – Norgul Sep 02 '16 at 10:12

score 0 · Answer 3 · answered Sep 02 '16 at 11:03

0

You can also use height attribute in <img> tag.

Like this <img src="/path/to/image" height="40"> without any CSS

answered Sep 02 '16 at 11:03

Prateek Gupta

538
2
10

CSS image resize issue

3 Answers3

Linked