Object-fit в CSS
Float обтекал текст вокруг медиа. object-fit отвечает на другой вопрос: когда img или video сидит в рамке фиксированного размера, как содержимое должно заполнять эту рамку? Освойте cover и contain, прежде чем растягивать лица через fill.
Набор инструментов object-fit
📊 Object-fit одним взглядом
| Значение | Повседневная задача |
|---|---|
fill |
Растянуть до рамки — может исказить пропорции |
contain |
Вписать всё медиа внутрь; возможны пустые полосы |
cover |
Заполнить рамку; края могут обрезаться |
none |
Оставить Intrinsic-размер; возможен выход или пробелы |
scale-down |
Как none или contain — что меньше |
object-position |
Целит, какая часть останется видимой при обрезке/вписывании |
object-fit раскрывается только когда у replaced-элемента есть определённая ширина и высота (или оба оси ограничены). Свободное изображение с auto-высотой не имеет рамки, «куда вписаться».
Cover — заполнить рамку, обрезка допустима
Карточки и миниатюры hero часто хотят каждый пиксель блока заполненным. cover увеличивает и обрезает переполнение. Сочетайте квадратную рамку с cover для аккуратных сеток.
.card__media {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
Contain — показать всю картинку
Снимки товаров и схемы часто должны оставаться полностью видимыми. contain оставляет полосы (letterbox), если пропорции разные — лучше полоса, чем обрезанный логотип.
.product__img {
width: 240px;
height: 240px;
object-fit: contain;
background: #f7f7f7;
}
Fill растягивает — используйте осторожно
fill заставляет медиа принять размер рамки, даже если пропорции исказятся. Подходит для абстрактных текстур; рискованно для лиц, логотипов и графиков.
.texture {
width: 320px;
height: 120px;
object-fit: fill;
}
object-position нацеливает обрезку
Когда cover обрезает, центр по умолчанию может спрятать лицо или логотип. Сдвиньте через object-position — проценты или ключевые слова вроде top и left.
.avatar {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
object-position: 50% 20%;
}
Спокойная привычка object-fit
Для смыслового медиа используйте настоящие <img> / <video> с object-fit. Используйте background-size, когда изображение — декоративный CSS-хром. Сначала задайте размер рамки, выберите cover или contain, затем подстройте позицию.
.avatar {
width: 64px;
height: 64px;
object-fit: cover;
object-position: center top;
border-radius: 50%;
}
Попробуйте сами
- Задайте изображению фиксированные ширину и высоту, затем сравните
coverиcontain. - Соберите круглый аватар с
coverи сдвиньтеobject-position. - Один раз примените
fillи заметьте искажение — затем вернитесь. - Сравните тот же кадр как декорацию
background-size: cover. - Напишите одно предложение: когда contain безопаснее cover?
Частые ошибки
- Ждать работы
object-fitбез рамки с размером - Использовать
fillна портретах и логотипах - Путать этот урок с обтеканием float или смещениями position
- Класть смысловые фото только в
background-image(сложнее alt) - Забывать
object-position, когда cover прячет объект
Кратко
object-fitвписывает replaced-медиа в рамку с размеромcoverзаполняет и может обрезать;containпоказывает всё и может оставить полосыfillможет исказить — используйте редкоobject-positionнацеливает видимую область- Для контентного медиа — object-fit; для декора — background-size
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху