Карточки товара в каталоге

Добрый день, такая проблема, добавляю фото товара, в самой карточке товара все выглядит хорошо, а вот на странице категории ужасно 2021-07-07_08-35-56

Как я понимаю тут можно просто настроить CSS “object-fit” но куда бы я не подставлял данный тег, добиться фото полностью покрывающую блок немогу. В итоге нужно что бы фотка не меняя своих соотношений сторон увеличилась до момента пока не покроет всю область карточки, object-fit: cover как раз подходит для этого, но куда его поставить я не пойму(

Может кто сталкивался с таким? Как выходили из ситуации?
Буду очень благодарен за помощь)

Посмотрите настройки-иконки

Там только размеры изображения, если их увеличивать то фото просто выходит за края контейнера, либо вертикальное фото выглядит нормально, но горизонтальное - плохо

Вы же понимаете, что в квадратной области не разместить нормально фотографии, которые “не квадратные”?

object-fit применяется к тегу img

Конечно понимаю, поэтому изображение увеличивается до тех пор пока не заполнит собой область, в этом и смысл object-fit

Тут скорее, вы же понимаете что цскарт генерирует превью с совершенно другим соотношением сторон и пустые области заполняет цветом заданным в настройках. Соответственно object-fit работать не будет так как область уже заполнена. Тут скорее нужно менять код генерации превью

Я перевел блоки во flex, получилось уже лучше, но теперь не могу обрезать изображение по области контейнера 2021-07-07_09-47-02

Неужели за столько лет никто не встречался с такой проблемой? Вендоры будут грузить фото разного формата и привести все к 1 виду это главная задача я считаю

А что вы предлагаете? В интернет магазине фото должны быть без фона или с белым фоном и тогда все будет ок. Тут либо заполнять фото цветом(то как делает цскарт), либо обрезать. Ради интереса поигрался с кодом генерации превью и сделал обрезку фото по меньшей стороне(так работает object-fit: cover), фото в вашем примере будут выглядеть лучше, но вот с фото которые подготовлены под интернет магазин будут проблемы. Поэтому с проблемой качественных фото сталкиваются все, но вот решать её нужно все же за счёт подготовки фото, правильной обрезки вручную итд. Так как даже ваш пример юбки в автоматическом режиме обрежется неправильно(небудет ни головы ни ног, хотя правильно на фото отобразить юбку, а верх фото можно обрезать).

2 лайка

Есть два подхода: один — толковый (например, на Озоне есть требования к загружаемым фото, они прописаны и все вендоры их исполняют) и второй (попытка придумать механизм, когда хрен знает какие фото будут выведены красиво). Может, стоит пользоваться первым?

4 лайка

А есть такие требования (к загружаемым фото) по CS-Cart?

Не совсем понял вопрос :slight_smile:

Cs-cart — платформа. Если вы на ней строите интернет-магазин, то вы сами определяете требования к изображениям.