Разбираем размеры изображения, обрезку cover и вписывание contain на одном понятном примере.
Один снимок, три разных результата
Есть фотография размером 1200 × 800 пикселей. Её отношение сторон — 3:2. Допустим, в каталоге для неё предусмотрена квадратная карточка 300 × 300. Эти два прямоугольника имеют разную форму. Нельзя одновременно заполнить квадрат, показать фотографию целиком и сохранить её пропорции. Придётся выбрать: оставить свободное место или обрезать часть изображения.
Это решение относится к композиции, а не к качеству исходного файла. Даже большая фотография будет выглядеть сплющенной, если её ширину и высоту изменить независимо. Увеличение разрешения не исправит растянутые лица.
Когда высота должна считаться сама
Для картинки внутри статьи обычно важнее показать весь кадр. Задай ширину, а высоту оставь автоматической. В нашем примере при ширине 600 пикселей получится высота 400. На телефоне при ширине 330 — высота 220. Фотография уменьшится равномерно.
Атрибуты width и height в HTML сообщают исходные размеры. Они помогают браузеру зарезервировать место ещё до загрузки изображения. CSS при этом может уменьшать видимый размер.
<img src="photo.jpg" width="1200" height="800"
alt="Макет сайта на экране ноутбука">
img {
display: block;
max-width: 100%;
height: auto;
}Обложке можно разрешить обрезку
В сетке каталога картинки удобно сделать одинаковыми по высоте. Здесь object-fit: cover заполняет область, сохраняя пропорции, но прячет края. Для нашего исходника квадрат 300 × 300 потребует масштабировать изображение до 450 × 300 и убрать по 75 пикселей слева и справа, если оно выровнено по центру.
Проверь главный объект: лицо, надпись или деталь проекта могут оказаться за границей. object-position позволяет сместить кадр, но не добавляет отсутствующую часть фотографии. Для особенно важной композиции лучше подготовить отдельную обложку.
.cover {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
object-position: center;
}Когда нужна вся картинка
Для логотипа, схемы или скриншота с подписями обрезка часто недопустима. object-fit: contain впишет изображение целиком. В квадрате 300 × 300 наш снимок займёт 300 × 200: сверху и снизу останется по 50 пикселей. Это ожидаемое поведение.
Свободную область можно оформить фоном карточки. Не стоит растягивать скриншот ради заполнения пустоты: кнопки и шрифты внутри него тоже изменят форму.
| Сценарий | Режим | Что проверить |
|---|---|---|
| Фото внутри статьи | height: auto | Виден весь кадр |
| Обложка каталога | cover | Главный объект не обрезан |
| Схема или логотип | contain | Подписи читаются |
Как проверить свой случай
Возьми изображение с кругом: искажение сразу будет заметно. Покажи его в широком и узком контейнере, затем сравни три режима. У круга должна остаться одинаковая ширина и высота; меняется только количество свободного места или видимая часть изображения.
После этого верни настоящий материал. Проверь не только первую картинку, но и вертикальную фотографию, горизонтальный скриншот и длинный логотип. Одна удачная обложка не гарантирует, что настройка подходит всему каталогу.