Как кадрировать изображение карточки через object-fit и object-position
Object-fit задаёт вписывание изображения в область карточки, а object-position меняет его выравнивание. Выберите режим и проверьте детали на разных размерах.
Что должно получиться
Фотографии в списке занимают согласованные области, сохраняют пропорции и не теряют важный объект. Лицо не обрезано случайно, предмет остаётся узнаваемым, а изображение документа не лишается нужного текста. Выбранный вид подходит содержимому, а не только пустому макету.
Сначала решите, разрешена ли обрезка. Для атмосферной фотографии она часто допустима. Для схемы, логотипа или снимка с важными надписями лучше сохранить изображение целиком. Одинаковая высота карточек не должна становиться причиной потери существенных сведений.
Из чего это складывается
| Настройка | Что происходит | Когда проверить особенно внимательно |
|---|---|---|
| Размер области img | Определяет рамку для содержимого | Ширина и высота отличаются от пропорций файла |
| object-fit: cover | Заполняет область с сохранением пропорций и возможной обрезкой | Важный объект расположен у края |
| object-fit: contain | Сохраняет весь объект внутри области | Появляются свободные участки вокруг |
| object-fit: fill | Заполняет область, допускает растяжение | Пропорции файла и области различаются |
| object-position | Выравнивает содержимое в заданной области | Нужный фрагмент не попадает в кадр |
| Источник файла | Определяет доступные детали и размер данных | CSS скрывает большую часть тяжёлого оригинала |
Область изображения и сам файл
Object-fit управляет содержимым заменяемого элемента, например img. Для заметного кадрирования нужна область с размерами, отличающимися от естественного соотношения сторон изображения. Если картинка просто сохраняет свои пропорции при width: 100% и height: auto, менять режим вписывания может быть незачем.
Свойство не обрезает исходный файл на сервере. Браузер получает выбранный ресурс и показывает его в своей области. Большая фотография не становится легче только потому, что в карточке видна её центральная часть.
Как это сделать по шагам
- Соберите реальные изображения: горизонтальное, вертикальное, с объектом у края и с важными деталями. Не проверяйте правило на одном удобном снимке.
- Определите размер области в карточке и допустимость обрезки. Для содержимого, которое нужно видеть целиком, заранее выберите соответствующий режим.
- Задайте размеры самого img средствами CSS. Проверьте, не переопределяют ли их другие правила и ограничения раскладки.
- Выберите cover для заполнения с обрезкой либо contain для полного показа. Сравните результат на всех подготовленных изображениях.
- При необходимости настройте object-position для конкретной фотографии. Начните с понятного выравнивания и проверьте положение важного объекта.
- Повторите проверку на нескольких ширинах карточки. Если нужный кадр не сохраняется, пересмотрите область или подготовьте подходящий исходный вариант.
- Проверьте качество, размер загружаемого файла и доступность полного изображения там, где оно нужно человеку.
Пример для фиксированной высоты
Учебное правило для img с классом card-photo: .card-photo { display: block; width: 100%; height: 12rem; object-fit: cover; object-position: 50% 35%; }. Высота и положение выбраны для примера. В рабочей карточке подберите их по содержимому и месту изображения.
В этом примере при изменении ширины меняется соотношение сторон рамки, поэтому проверяйте обрезку в нескольких размерах карточки.
Object-position задаёт выравнивание содержимого относительно области. Значения вроде center top или проценты помогают изменить показанный участок. Они не увеличивают разрешение и не гарантируют, что любой важный объект всегда останется видимым. Для разных фотографий может потребоваться разная настройка.
Cover или contain
Cover сохраняет пропорции и закрывает всю область. При несовпадении соотношения сторон часть содержимого выходит за её границы и обрезается. Подходит ли это, решают по самому изображению. Потеря пустого фона и потеря важной части предмета — разные результаты.
Contain тоже сохраняет пропорции, но показывает объект целиком. Если соотношения сторон различаются, остаются свободные участки. Их внешний вид зависит от фона элемента. Не считайте такие поля ошибкой автоматически: иногда это правильный способ показать логотип или документ.
Частые ошибки
Задать object-fit только внешней обёртке
Проверьте, какой элемент содержит изображение. Для обычного img правило нужно назначить ему, а размеры обёртки согласовать с размерами изображения. Одно свойство на произвольном внешнем блоке не управляет содержимым вложенного img.
Растягивать фотографию ради одинаковой рамки
При fill несовпадение пропорций может исказить предметы и лица. Если требуется заполнение без искажения, сравните cover, а если нужно полное изображение — contain. После настройки оцените узнаваемость содержимого, а не только совпадение границ.
Использовать один центр для всех снимков
Центрирование подходит не каждой композиции. Проверьте портреты, объекты у края и изображения с неравномерным свободным пространством. Иногда разумнее сменить исходный кадр или формат области, чем пытаться компенсировать всё положением.
Прятать важные данные без полного просмотра
Если в обрезанной части есть характеристика, подпись или существенная деталь, человек может сделать неверный вывод. Сохраните нужное в карточке либо предусмотрите понятный доступ к полному изображению. Текстовое описание также должно соответствовать тому, что человек получает.
Как проверить
- Изображение не искажено изменением пропорций.
- Важный объект остаётся узнаваемым на узкой и широкой карточке.
- Обрезка разрешена для конкретного типа содержимого.
- Свободные участки при contain выглядят осознанно.
- Правило применяется к img и не перекрывается случайным стилем.
- Размер файла соответствует задаче, а не скрыт за маленькой рамкой.
- При необходимости доступно полное изображение.
Для выбора файлов разберите адаптивные источники изображений, затем проверьте просмотр крупных снимков и момент загрузки картинок. Помощь с карточками можно найти в разделе «Разработка».
Вопросы и ответы
Cover меняет исходный файл?
Нет. Он определяет показ содержимого в области элемента. Для подготовки другого файла нужна отдельная обработка изображения.
Почему при contain появились поля?
Соотношения сторон изображения и области различаются. Режим сохраняет весь объект, поэтому часть области может остаться свободной.
Зачем задавать высоту?
Для кадрирования нужна определённая область показа. Если элемент повторяет естественные пропорции файла, заметной обрезки может не быть.
Object-position исправит любой снимок?
Нет. Если важные части не помещаются в выбранную рамку, пересмотрите её пропорции, режим или сам исходный кадр.
Эти свойства управляют фоновым изображением?
Для CSS-фона используются другие свойства, в том числе background-size и background-position. Object-fit применяют к соответствующим заменяемым элементам.
Почему всё хорошо только на одной ширине?
При другой ширине может измениться соотношение сторон области и обрезка. Проверяйте один и тот же файл во всех нужных вариантах карточки.