CSS image resizing

Question

I have a problem resizing images that I created in the admin panel.

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

At maximum magnification, the images look great:

If I however resize the browser, they all compress together:

And then I tried removing the height: 100px , which seems to do the trick, but for some reason this is for some reason:

Answer 1

If you do not want your images to be stretched, you must align one dimension and enable the other dimension as auto . (this preserves image proportions)

See the example below where width kept constant and height automatically adjusted:

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

See the example below where height kept constant and width automatically adjusted:

 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> 

Answer 2

Just uninstall

 height: 100px; 

i.e

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

Answer 3

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

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