Как правильно вывести фото в контейнере 100х100px без деформации, если они все разного размера?

Question

[vladislav997]

Подскажите, допустим есть div с размерами 100х100px, разные фотки с разными размерами. Если их просто выводить и указывать размер 100х100, они деформируются. А как сделать так, чтобы их ширина растягивалась до 100пикселей, но высота обрезалась (типа кропалась)?

Просто как пример:

<div style="width:100px;height:100px">
<img src="...">
</div>

Answer 1

[iBird Rose]

используй object-fit: cover;