Для центрирования изображения воспользуемся свойством object-fit: cover;. Оно вписывает изображение . Само выравнивает ширину и высоту и центрует. Это свойство применяется для Img. Поэтому нам не нужны больше обертки. Изображение всегда будет именно таким, как вы задали.
В коде ниже, изображение вписывается в квадрат 100 на сто пикселов. Идеально!
|
1 2 3 4 5 |
img { width: 104px; height: 104px; object-fit: cover; } |
А вот как приводятся пропорции изображения, если выставлен квадрат и скругление.
