Как позиционировать фото в карточке товара?

Question

[reinmaker90]

Есть карточка товара (превью), которая из себя представляет блок, с вложенным туда изображением, которое должно занимать ~70% доступной области блока, и небольшим футером, в котором будут выводиться пара строк.
Как создать карточку так, чтобы при условии, что фотографии могут быть разных размеров, картинка всегда была центрирована на своем месте, без сплющивании и обрезаний частей? Детальный блок также должен быть фиксированного размера.

пример

Comments

[Антон Литвиненко]

волшебства не бывает. допустим поле для фото квадратное. если без обрезания частей, то при вставке прямоугольной ландшафтной фотографии будут поля сверху и снизу, портретной - слева и справа. А вот с обрезанием частей вполне поможет свойство object-fit: cover;

Answer 1

[Ross Alex]

https://codesandbox.io/s/busy-ramanujan-93xgf

Answer 2

[Антон]

детальный блок так же должен быть фиксированного размера

А в чем проблема? Сделайте 100px и все, или сколько вам там надо

.product-item img {
  display: block;
  width: 70%;
  height: 200px;
  object-fit: cover;
  margin: 0 auto;
}