В дизайне ни бум-бум, как оптимально отображать картинки в интернет-магазине?

Question

[alex-1917]

Почему спрашиваю - в дизайне ни бум-бум...
Как видно на скриншоте, картинки могут быть:

• квадратные
  
• прямоугольные вертикальные
  
• прямоугольные горизонтальные
  

Как отображать картинки без пустых мест под ними?
Склоняюсь к универсальному формату - квадрат.

Картинки отображаются тегом img, отображать их в виде квадрата через свойство background-cover не подходит/

если дал ответ, держи сюрприз:

Comments

[Сергей Горностаев]

На Хабре была серия статей на тему разработки правильного интерфейса для интернет магазинов. Рекомендую найти и почитать.

Answer 1

[Ankhena]

Сюрприз с котиком хорош.

Но вам тоже сюрприз: картинки для интернет магазина нужно готовить.
img тоже автоматом может обрезаться под квадрат, это не проблема. Проблема в другом, что так и голову можно отрезать, автоматом.

Comments

[alex-1917]

я ж и спрашиваю - как готовить-то.Обрезать по верхней части - обязательно попадется картинка, где нужен будет и низ.
не хотелось бы на masonry переходить, будет не магазин, а блог какой-то...)))

[Rustam Bainazarov]

alex-1917, ну тогда у тебя только этот вариант тебе подходит, ибо ты пытаешься сесть на два стула. На мой взгляд, важнее оставить нужную область.

Вот тут:
Нужно создать миниатюру картинок особенным образом?

Текст из того ответа

Такое CSS-решение не зависит ни от соотношения сторон самой картинки, ни от ширины контейнера (можно делать адаптивно без px, как в моем примере) + поддержка браузерами, можно сказать, максимальная + место под картинку не скачет, пока картинка грузится (lazyload оценит):

[Rustam Bainazarov]

alex-1917, ну либо object-fit:



Либо же готовить фотографии вручную и снимать их нормально и единообразно.

[Ankhena]

alex-1917, Выбрать пропорции и к ним приводить все картинки ручками. Или снимать сразу как нужно, если есть возможность.
Иначе: либо разные пропорции либо обрезки либо поля.

Answer 2

[Матвей Правосудов]

1. Как уже сказали выше, картинки нужно готовить, чтобы они были в одном стиле и формате.
   
2. Если не подошел первый вариант, то можно замостить сетку через какой-нибудь masonry.
   

Еще лучше избавить от ненужной инфы (артикул) в превью товара в выдаче.