Изменение размера изображения CSS

Question

У меня проблема при изменении размеров изображений, которые я создал в панели администратора.

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

Когда максимизируется, изображения выглядит превосходно:

Если я однако размер браузера, все они сжимаются вместе:

А потом я судил удаляя свойство height: 100px, которое, кажется, делает трюк, но одно изображение по какой-то причине выключено:

Answer 1

Если вы не хотите, чтобы ваши изображения, чтобы растянуть, вы должны придавить одно измерение и позволяют другое измерение, как auto , (Это сохраняет соотношение сторон изображения)

Смотрите пример ниже, где width поддерживается постоянным, а height авто-подстраивается:

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>

Смотрите пример ниже, где height хранится постоянная, а width автоподстройки:

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

Просто удалите

height: 100px; 

т.е.

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

Answer 3

Вы также можете использовать height атрибут <img> тега.

Как этот <img src="/path/to/image" height="40"> без каких-либо CSS