@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>

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

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

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


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

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

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

Войти через центр авторизации
Похожие вопросы
Deliver Москва
До 160 000 руб.
Nordavind Москва
от 60 000 до 90 000 руб.
Smart Медицина Москва
от 120 000 руб.
22 марта 2019, в 10:54
30000 руб./за проект
22 марта 2019, в 09:52
20000 руб./за проект