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

ширина картинок одинаковая, высота разная. Верхняя часть картинок крайне важна.
Собственно, вопрос: как подогнать картинки под одинаковую высоту, обрезав их только снизу.
  • Вопрос задан
  • 88 просмотров
Решения вопроса 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, но есть полифил,
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Spartan.by Минск
от 400 до 700 usd.
Alternativa Games Пермь
от 40 000 до 80 000 руб.
АМТ Екатеринбург
от 40 000 до 50 000 руб.
20 янв. 2019, в 22:33
30000 руб./за проект
20 янв. 2019, в 22:03
1000 руб./за проект