Как задать обрезку фото по высоте, когда по ширине 100%?

Question

[Mesuti]

Привет!
Как задать обрезку фото в карточке товара по высоте, когда по ширине 100%?
Чтобы картинки были одинаковые? ставятся они в cms, поэтому ищу вариант правки на CSS,
Backgroud-image не получится сделать.
И возможно ли обрезанное фото выравнивать, наример по верхнему краю, спава, слева и т.д.
Песочница jsFiddle
p.s. картинки могут быть абсолютно разными.

Comments

[Dmitry Bay]

background-image

[Mesuti]

Dmitry Bay, ставятся картинки в cms, поэтому ищу вариант правки на CSS,
Backgroud-image не получится сделать.

[Dmitry Bay]

Александр Сорокин, вы же можете верстку поменять? просто у вас там два варианта - обрезать на бэкенде под формат, или использовать такой css.

Answer 1

[fl3nkey]

Вот так?

https://jsfiddle.net/2kde89mv/11/

Comments

[Mesuti]

Спасибо за ответ.
Но по ссылке исходный вариант.
чтобы проще было, добавил в вопрос картинку.

[fl3nkey]

Александр Сорокин, Выставьте фикс. размеры блоку с картинкой.
Есть вариант использовать background-image? если есть, используйте свойство background-size: cover; в паре с ним.
Если нет, для тега img есть аналогичное свойство object-fit: cover;, но он не везде работает, но есть полифил.

[Mesuti]

fl3nkey, Текущие карточки генерируются в cms, поэтому в приоритете вариант на CSS обрезать. Шаблон править еще сложнее.

[fl3nkey]

Александр Сорокин, ну как я вам уже ответил, используйте object-fit для картинки, но это не будет работать в IE, для этого нужен полифил. В итоге это будет выглядить примерно так:

.cart > img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
}

[Mesuti]

fl3nkey, спасибо! Фотография получается обрезается снизу. Раз начали разговор, то есть ли способы обрезки сверху?