@reinmaker1990

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

ДД, задача такова, есть условная карточка товара(превью) которая из себя представляет блок, с вложенным туда изображением которое должно занимать ~70% доступной области блока и небольшим футером в котором будут выводиться пара строк.
Как создать карточку так что бы при условии что фотографии могут быть разных размеров, картинка всегда была центрирована на своем месте, без сплющивании и обрезаний частей, детальный блок так же должен быть фиксированного размера, подскажите пож-та
пример
  • Вопрос задан
  • 49 просмотров
Пригласить эксперта
Ответы на вопрос 2
Eridani
@Eridani
Мимо проходил
детальный блок так же должен быть фиксированного размера

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

.product-item img {
  display: block;
  width: 70%;
  height: 200px;
  object-fit: cover;
  margin: 0 auto;
}
Ответ написан
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
Так или иначе контейнер для картинки должен быть с фиксированной высотой.
Картинка - с max-width и max-height.
А дальше - хоть flex, хоть display:table-cell, да хоть подливание белых полос на сервере до квадрата
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы