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

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;
}

Answer 3

[sashabeep]

Так или иначе контейнер для картинки должен быть с фиксированной высотой.
Картинка - с max-width и max-height.
А дальше - хоть flex, хоть display:table-cell, да хоть подливание белых полос на сервере до квадрата