Как сделать из изображения 1x1 > 4x3?

178

18 июня 2021, 10:50

Видел такое решение в некоторых интернет-магазинах: для изображения добавляется контейнер, при вставке изображения в контейнер оно растягивается по всей высоте контейнера и выравнивается по центру, а ширина обрезается контейнером. В итоге получается из 1x1 > 3x4.

Я использую CSS Framework Bulma. По умолчанию у нас уже есть контейнер для изображения сохраняющий нужное нам соотношение сторон (3x4). Однако, если я добавлю изображение 1x1, то оно просто растянется под размер контейнера. Как сделать центрирование изображения и обрезать по краям?

<figure class="image is-3by4">
    <img src="https://bulma.io/images/placeholders/480x640.png">
</figure>

Answer 1

Вариант №1
Попробуйте для изображения добавить следующие правила (93% браузеров поддерживает этот вариант):

.image-1{
   object-fit: cover;
   object-position: center;
   width:100%;
   height: 100%;
}

Вариант №2
Вместо тега img использовать div + background-size (поддержка 96,5%+ браузеров)

Вариант №3
Для родителя figure использовать overflow: hidden;, для изображения height:100%; transform:translate(-50%, -50%); + vendor-prefix (-moz, -webkit, -o, -ms) (поддержка 97,37%+ браузеров)