Как задать разную ширину для изображения в галерее в зависимости от размеров (ориентации) изображения
Сверстал такую галерею, но проблема в следующем. Все картинки одинаковых пропорций. Возможно ли сделать так, чтобы те изображения, которые в альбомной ориентации сохраняли свои пропорции. То есть ширина так и была больше высоты. Но высота изображений в рамках одного ряда была по-прежнему одинаковой.
https://i.stack.imgur.com/EbnQO.png https://i.stack.imgur.com/Ijkmz.jpg
Ответы (1 шт):
Масштабирование изображений с сохранением пропорций можно реализовать множеством способов. Здесь приведу только два из них, которые сам использую чаще всего.
Ограничение размеров img по элементу-обертке
Классический кроссбраузерный способ: помещаем img в div (например), и указываем в стилях width|max-width и/или height|max-height со значением 100%:
* { margin: 0; padding: 0; }
.row { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem; background: #eee; }
.row .img-wrap { height: 110px; }
.img-wrap > img { height: 100%; } /* ◄◄◄ */<div class="row">
<div class="img-wrap"> <!-- ◄◄◄ -->
<img src="https://lorempixel.com/110/180/cats/?r=0">
</div> <!-- ◄◄◄ -->
<div class="img-wrap">
<img src="https://lorempixel.com/180/110/cats/?r=1">
</div>
<div class="img-wrap">
<img src="https://lorempixel.com/110/180/cats/?r=2">
</div>
<div class="img-wrap">
<img src="https://lorempixel.com/110/180/cats/?r=3">
</div>
<div class="img-wrap">
<img src="https://lorempixel.com/90/55/cats/?r=4">
</div>
</div>Нюанс: лучше избегать одновременного указания width: 100%; и height: 100%; - потому что при несовпадении соотношений сторон изображения и обертки, это приведет к искажению. С max-width: 100%; max-height: 100%; такого не случится, но изображение конечно не будет масштабироваться "вверх" до родительских размеров (обертки) при превышении собственных.
object-fit
Всего лишь object-fit: contain; в стилях - это суперпросто, суперудобно, правда без поддержки в IE (которую до сих пор просят иногда):
* { margin: 0; padding: 0; }
.row { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem; background: #eee; }
.row > img { height: 110px; object-fit: contain; } /* ◄◄◄ */<div class="row">
<img src="https://lorempixel.com/110/180/cats/?r=0">
<img src="https://lorempixel.com/180/110/cats/?r=1">
<img src="https://lorempixel.com/110/180/cats/?r=2">
<img src="https://lorempixel.com/110/180/cats/?r=3">
<img src="https://lorempixel.com/90/55/cats/?r=4">
</div>Примеры респонсивны - сохранение высоты изображений при их переносе (от flex-wrap), можно проверить уменьшив окно браузера.
Одно последнее изображение в каждом примере масштабируется "вверх", а остальные изображения уменьшаются при необходимости (второй сценарий гораздо более частый).