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

Question

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

ширина картинок одинаковая, высота разная. Верхняя часть картинок крайне важна.
Собственно, вопрос: как подогнать картинки под одинаковую высоту, обрезав их только снизу.

Answer 1

[Rustam Bainazarov]

object-fit: cover;
object-position: 50% 0 (или просто 0 0);

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

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


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

P. S. IE11 не поддерживает object-fit, но есть полифил,

Comments

[denism300]

P. S. IE11 не поддерживает object-fit, но есть полифил

ie и edge, как обычно, впереди планеты всей )))