@denism300

Как выровнять картинки по высоте, обрезав их только снизу?

Есть примерно такая конструкция:
<div class="someClass"><img src="..." /></div>
<div class="someClass"><img src="..." /></div>
<div class="someClass"><img src="..." /></div>
...
<div class="someClass"><img src="..." /></div>

ширина картинок одинаковая, высота разная. Верхняя часть картинок крайне важна.
Собственно, вопрос: как подогнать картинки под одинаковую высоту, обрезав их только снизу.
  • Вопрос задан
  • 135 просмотров
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
object-fit: cover;
object-position: 50% 0 (или просто 0 0);

Высоту и ширину уже надо подгонять под ваши потребности. Либо просто высоту, либо максимальную высоту.

Либо вообще воспользоваться техникой padding-bottom: X% для обёртки картинки (которую нужно добавить), чтобы сделать сохранение пропорций по изменении ширины, а саму картинку на абсолютное позиционирование:
https://jsfiddle.net/1o5m7rwp/11/


По ссылке: обрезка по высоте + сохранение соотношения сторон картинки + обрезание нижней её части. Попробуйте сжать окно, чтобы увидеть сохранение соотношения сторон при адаптивности.

P. S. IE11 не поддерживает object-fit, но есть полифил,
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы