Пропорции изображений в Тильде: как задать формат карточек

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

Дальше показываю, как задать формат карточек через встроенные инструменты Тильды и через кастомный CSS, когда нужных пропорций в списке блока просто нет.

Зачем задавать пропорции изображений в карточках Тильды

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

На практике чаще всего эту проблему вижу в интернет-магазинах на T‑Store: продавец выгружает фото товаров из 1С или от поставщика, где нет единого стандарта по размеру, а карточка каталога рассчитана на строгое соотношение. Без фиксации пропорций Тильда либо обрезает товар по центру и отрезает часть упаковки, либо оставляет белые поля сверху и снизу, и карточки в одном ряду получаются разной высоты.

Есть и вторая причина заняться пропорциями отдельно, а не полагаться на автоматическую обрезку: скорость загрузки страницы. Если в карточку с фиксированной высотой 300 пикселей Тильда подставляет оригинал 4000 на 3000, браузер скачивает полный вес файла, а сжимает его уже на экране пользователя. Через явное соотношение сторон и адаптивные размеры в настройках блока изображение отдаётся браузеру ближе к реальному месту показа.

Как Тильда обрабатывает соотношение сторон картинок

Для большинства блоков Тильда рисует изображение не тегом img напрямую, а через background-image на обёртке с классом вроде t388__imgwrapper или t951__imgwrapper и включает background-size: cover. Такой способ обрезает фото по центру, чтобы заполнить всю область блока, и совпадает с тем, что в панели редактора называется настройкой «обложка» или «cover».

В Zero Block ситуация немного другая: там изображение вставляется как отдельный объект с собственной шириной и высотой в пикселях, и у него есть переключатель Cover в настройках стиля. Если Cover включён, картинка обрезается под заданные пропорции контейнера, если выключен, Тильда сжимает изображение целиком и добавляет пустые поля, чтобы вписать его без обрезки.

Для блоков T‑Store пропорции задаются на уровне настроек блока целиком, а не для каждого товара отдельно: меняете формат обложки один раз, и он применяется ко всем карточкам каталога сразу. Это удобно, пока не появляется задача сделать в одной сетке товары разной формы, например квадратные превью и вытянутые баннеры акций вперемешку, тогда без кастомного кода не обойтись.

Встроенные настройки формата в блоках Тильды

Первым делом проверяю штатные настройки блока, потому что часто задачу можно закрыть без единой строки кода.

Для блоков с сеткой карточек (портфолио, услуги, блог) в панели справа обычно есть вкладка «Стиль» или «Обложка», а в ней пункт «Пропорции» либо «Формат изображения» со списком вариантов: квадрат 1:1, альбомный 4:3, широкоформатный 16:9 или «оригинал» без обрезки. Выбор одного пункта сразу применяется ко всем карточкам блока.

Для Zero Block пропорции задаются через размеры конкретного изображения: открываю объект, указываю ширину и высоту в процентах или пикселях и включаю Cover. Здесь удобно делать неодинаковые карточки в одной сетке, но и ошибиться проще, потому что каждую картинку приходится настраивать отдельно.

Для T‑Store в настройках блока каталога есть отдельный раздел оформления карточки товара, где выбирается пропорция изображения для всего каталога сразу и способ показа: обрезка по центру или вписывание с полями. Если нужно, чтобы на карточках с прозрачным фоном (например, для косметики или украшений) не было обрезки, выбираю вписывание, а обрезку центром оставляю для фото с моделями или интерьером, где пустые поля выглядят хуже кадрирования.

Кастомный CSS для точных пропорций карточек

Встроенные варианты покрывают процентов восемьдесят задач, но иногда нужного соотношения в списке нет: например, для карточек курсов часто нужны портретные 3:4 или 2:3, а в стандартном наборе Тильды таких пунктов нет. В этом случае добавляю код прямо в настройки блока или через общий редактор кода страницы.

Базовый приём: оборачиваю картинку в контейнер, задаю ему aspect-ratio и ставлю у изображения object-fit: cover, чтобы оно заполняло контейнер без искажения пропорций.

.t388__imgwrapper {
 position: relative;
 aspect-ratio: 3 / 4;
 overflow: hidden;
}
.t388__imgwrapper img,
.t388__imgwrapper .t388__img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
}

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

Если на проекте есть браузеры без поддержки aspect-ratio, использую запасной вариант через padding-top в процентах от ширины контейнера, это тот же приём, что применяли в вёрстке до появления aspect-ratio, и он работает надёжно в любом браузере.

Когда карточек в сетке много и часть из них должна отличаться по пропорциям от остальных, например одна широкая обложка среди квадратных превью, правлю не общий класс блока, а добавляю карточке индивидуальный класс через настройки конкретного элемента и уже к нему привязываю свои размеры. Такие точечные правки обычно делаю в рамках разовой доработки, а если сетка карточек завязана на более сложную логику, например разные пропорции по категориям товара с кастомной фильтрацией, выношу это в отдельную задачу через услуги по доработке Тильды, потому что аккуратно завязать это на редактор блоков без конфликтов с будущими правками клиента руками в интерфейсе занимает больше времени, чем кажется на первый взгляд.

Готовые соотношения сторон для разных типов карточек

Чтобы не гадать каждый раз заново, использую несколько проверенных на практике соотношений под конкретные типы карточек.

Квадрат 1:1 почти всегда безопасный выбор для каталога, потому что одинаково прилично смотрится и с товаром на белом фоне, и с товаром в интерьере. Для блога 16:9 удобен ещё и тем, что совпадает с форматом превью в соцсетях, и обложку статьи не приходится готовить в двух вариантах.

Частые ошибки при настройке пропорций изображений

• Включённый Cover обрезает лицо человека или логотип на фото, потому что обрезка идёт строго по центру, а нужный элемент кадра сдвинут в сторону. В таких случаях в Zero Block меняю object-position, а не откатываюсь на вписывание с полями.
• Пропорции настроены только на десктопной версии блока, а на мобильной Тильда показывает другую раскладку карточек с собственными размерами, из-за чего сетка на телефоне снова разъезжается. Проверяю обе версии отдельно.
• В карточки загружают фото с сильно отличающимся разрешением, мелкая картинка растягивается под общий контейнер и становится заметно более размытой на фоне соседних карточек, поэтому для новых загрузок сразу прошу единый минимальный размер по большей стороне.
• После смены пропорций забывают почистить кеш Тильды и обновить страницу в редакторе, из-за этого кажется, что правка не сработала, хотя код уже применился.

Частые вопросы

Как задать одинаковый размер карточек в Тильде, если фото разного размера?

Проще всего включить Cover в настройках блока или Zero Block и указать одинаковое соотношение сторон для всей сетки, тогда Тильда сама обрежет каждое фото под общий формат. Если нужного соотношения нет в списке блока, добавляю CSS с aspect-ratio и object-fit: cover на обёртку картинки.

Можно ли задать произвольное соотношение сторон, если в настройках блока его нет?

Да, через код. Оборачиваю картинку в контейнер с нужным aspect-ratio, например 5/7, и ставлю object-fit: cover у изображения внутри. Это работает для любого числового соотношения, а не только для пунктов из штатного списка Тильды.

Почему на мобильной версии пропорции карточек сбиваются?

Потому что мобильная версия блока в Тильде часто использует отдельную раскладку и собственные размеры, которые не наследуются от десктопной автоматически. Проверяю пропорции отдельно на вкладке мобильной версии в редакторе и при необходимости добавляю медиазапрос в код для маленьких экранов.

Как обрезать изображение без искажения при разных пропорциях?

Использую object-fit: cover вместо ручного изменения размера картинки. Он сохраняет исходные пропорции фото и просто обрезает лишнее по краям, в отличие от растягивания через width и height в процентах, которое сжимает или вытягивает изображение и портит его геометрию.