Изменить размер изображения, используя только HTML и CSS

Question

У меня есть изображение с высотой 173px и шириной 157px. Я хочу установить его высоту и ширину на 100 px, но когда я это делаю, оно растягивается. Я хочу использовать для этого тег img. У меня нет проблем, если онообрезается при изменении размера

Answer 1

Дайте height:auto при изменении ширины.Напишите так:

img{
 width:100px;
height:auto;
}

Answer 2

Да, он растягивается, когда вы применяете другой коэффициент умножения в горизонтальном направлении, чем в вертикальном.Вы можете попробовать width:auto или heigth:auto.

Редактировать: или, если у вас нет проблем с обрезкой изображения, вы можете поместить его в элемент контейнера (например, в div),для которого вы устанавливаете overflow:hidden.

<div style="width:100px; height:100px; overflow:hidden">
 <img src="your image" alt="" style="width:100px; height:auto" />
</div>

Еще одно редактирование: только что понял, что можно обрезать его, используя только CSS на изображении (и не нуждаясь в родительском контейнере), используя свойство clip.См. W3C page .
Однако, к сожалению, достаточно того, что элемент должен быть абсолютно позиционирован, поэтому, если вы точно не знаете, где в окне вы хотите поместить его, вам придется поместить его вродительский контейнер в любом случае.Ну хорошо.

Answer 3

Я не верю, что это можно сделать с помощью тега img, поскольку он растянет изображение в соответствии с предоставленной шириной / высотой.Однако вместо этого можно будет использовать div -элемент и назначить изображение в качестве фона.Таким образом, изображение не будет изменено, части изображения, которые невозможно отобразить в элементе размером 100x100 пикселей, будут выглядеть «обрезанными».

.image-element
{
   background-image: url('yourimage.png');
   width: 100px;
   height: 100px;
}

Используя атрибут background-position, вы можететакже контролируйте, какие части изображения «обрезаются».

Answer 4

Да, это растянуто. Как вы хотите обойтись без растяжения?

Единственное, что вы можете сделать, - это воссоздать изображение с использованием API сервера и не использовать изменение размера в CSS.

Но это будет растянуть, потому что вы не соблюдаете соотношение между шириной и высотой!