Пошук уроків, статей та іншого контенту
Навчитеся керувати масштабуванням і кадруванням зображень та відео всередині контейнера.
object-fitЗображення та відео часто мають власні пропорції, які не збігаються з розмірами контейнера. Якщо задати елементу одночасно width і height, браузер за замовчуванням може розтягнути вміст.
<img class="photo" src="images/mountain.jpg" alt="Гори">.photo {
width: 300px;
height: 200px;
}Якщо оригінальне зображення має інші пропорції, воно може виглядати спотвореним. Властивість object-fit визначає, як вміст <img>, <video> або іншого заміненого елемента розміщується всередині заданих розмірів.
.photo {
width: 300px;
height: 200px;
object-fit: cover;
}У цьому прикладі зображення заповнить область 300 × 200 зі збереженням пропорцій. Частина зображення, яка не поміститься, буде обрізана.
object-fitfillЗначення за замовчуванням.
Вміст розтягується до повного розміру елемента. Пропорції можуть змінитися.
.image {
width: 300px;
height: 200px;
object-fit: fill;
}Якщо вихідне зображення квадратне, воно стане прямокутним.
containЗображення повністю поміщається всередині контейнера зі збереженням пропорцій.
.image {
width: 300px;
height: 200px;
object-fit: contain;
}Якщо пропорції зображення та контейнера відрізняються, з боків або зверху й знизу з’явиться вільний простір.
Це значення підходить, коли важливо показати весь об’єкт:
логотип;
схему;
товар, який не можна обрізати;
ілюстрацію з важливими деталями.
coverЗображення повністю заповнює контейнер зі збереженням пропорцій. Частини, які виходять за межі контейнера, обрізаються.
.image {
width: 300px;
height: 200px;
object-fit: cover;
}cover часто використовують для:
аватарів;
карток товарів;
обкладинок статей;
банерів;
галерей зображень.
noneВміст зберігає власний початковий розмір і не масштабується.
.image {
width: 300px;
height: 200px;
object-fit: none;
}Якщо зображення більше за контейнер, його частина може бути обрізана.
scale-downБраузер обирає між none і contain — залежно від того, який варіант дає менший розмір зображення.
.image {
width: 300px;
height: 200px;
object-fit: scale-down;
}Це корисно, коли маленькі зображення не потрібно збільшувати, але великі мають поміститися в контейнер.
contain і coverЦі значення використовують найчастіше, але вони вирішують різні задачі.
containпоказує весь об’єкт;
може залишати вільний простір;
не обрізає зображення;
підходить для логотипів і схем.
coverповністю заповнює контейнер;
зберігає пропорції;
може обрізати краї;
підходить для фотографій і прев’ю.
object-positionКоли використовується object-fit: cover, частина зображення обрізається. За замовчуванням браузер центрує вміст.
Змінити точку, навколо якої відбувається кадрування, можна за допомогою object-position.
.image {
width: 300px;
height: 200px;
object-fit: cover;
object-position: center top;
}Доступні ключові слова:
left;
center;
right;
top;
bottom.
Можна вказувати горизонтальну та вертикальну позиції разом:
.image {
object-position: right center;
}Також можна використовувати відсотки:
.image {
object-position: 70% 20%;
}Перше значення відповідає за горизонтальну позицію, друге — за вертикальну.
Наприклад, якщо обличчя на фотографії розташоване ближче до правого краю, його можна залишити видимим:
.avatar {
width: 120px;
height: 120px;
object-fit: cover;
object-position: 75% center;
border-radius: 50%;
}Для стабільної картки зображенню зазвичай задають фіксовану область і object-fit: cover.
<article class="card">
<img
class="card__image"
src="images/forest.jpg"
alt="Лісова дорога"
>
<div class="card__content">
<h2>Прогулянка лісом</h2>
<p>Опис фотографії або публікації.</p>
</div>
</article>.card {
width: 320px;
overflow: hidden;
border: 1px solid #d7d7d7;
border-radius: 12px;
background-color: #ffffff;
}
.card__image {
display: block;
width: 100%;
height: 200px;
object-fit: cover;
}
.card__content {
padding: 16px;
}overflow: hidden тут приховує все, що виходить за межі самої картки, зокрема кути зображення біля заокруглених країв.
object-fit працює не лише із <img>, а й із <video>.
<div class="video-frame">
<video
class="video-frame__content"
controls
poster="images/video-preview.jpg"
>
<source src="videos/presentation.mp4" type="video/mp4">
Ваш браузер не підтримує відтворення відео.
</video>
</div>.video-frame {
width: 640px;
height: 360px;
background-color: #111111;
}
.video-frame__content {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}Якщо потрібно показати все відео без обрізання, використовуйте contain:
.video-frame__content {
width: 100%;
height: 100%;
object-fit: contain;
}У такому випадку навколо відео може залишитися вільний простір кольору фону контейнера.
У наступному прикладі однакові зображення розміщено в контейнерах однакового розміру, але кожне використовує інше значення object-fit.
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 24px;
font-family: Arial, sans-serif;
background-color: #f2f4f7;
}
.gallery {
display: grid;
grid-template-columns: repeat(3, minmax(180px, 1fr));
gap: 16px;
max-width: 900px;
margin: 0 auto;
}
.example {
overflow: hidden;
border-radius: 12px;
background-color: #ffffff;
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}
.example img {
display: block;
width: 100%;
height: 180px;
border-bottom: 1px solid #e1e5e9;
}
.example__title {
margin: 0;
padding: 12px;
font-size: 16px;
text-align: center;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
background-color: #dfe5eb;
}
.cover {
object-fit: cover;
}
.cover-top {
object-fit: cover;
object-position: center top;
}
@media (max-width: 700px) {
.gallery {
grid-template-columns: repeat(2, minmax(140px, 1fr));
}
}
@media (max-width: 450px) {
.gallery {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<main class="gallery">
<article class="example">
<img class="fill" src="images/portrait.jpg" alt="Портрет">
<h2 class="example__title">fill</h2>
</article>
<article class="example">
<img class="contain" src="images/portrait.jpg" alt="Портрет">
<h2 class="example__title">contain</h2>
</article>
<article class="example">
<img class="cover" src="images/portrait.jpg" alt="Портрет">
<h2 class="example__title">cover</h2>
</article>
<article class="example">
<img class="cover-top" src="images/portrait.jpg" alt="Портрет">
<h2 class="example__title">cover + object-position</h2>
</article>
</main>
</body>
</html>Для запуску прикладу потрібно покласти файл portrait.jpg у папку images. У всіх прикладах область зображення має однаковий розмір, тому різницю між значеннями object-fit легко побачити.
object-fit і фонові зображенняobject-fit працює з вмістом елемента, наприклад із <img> або <video>. Для CSS-фонових зображень ця властивість не використовується.
Для фонів застосовують іншу властивість:
.banner {
width: 100%;
height: 240px;
background-image: url("images/banner.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}Відповідність властивостей така:
object-fit: cover — приблизно відповідає background-size: cover;
object-position — приблизно відповідає background-position.
Якщо зображення є змістовною частиною документа, краще використовувати <img> з alt. Якщо це лише декоративний фон, доречним може бути background-image.
Для зображення, яке має заповнювати контейнер і не спотворюватися, зазвичай достатньо такого CSS:
.media {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}Але властивість height: 100% працює очікувано лише тоді, коли батьківський елемент має визначену висоту:
.media-container {
height: 240px;
}
.media {
width: 100%;
height: 100%;
object-fit: cover;
}Якщо висота контейнера не задана, можна встановити її через aspect-ratio:
.media-container {
aspect-ratio: 16 / 9;
}
.media {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}Тепер контейнер зберігатиме пропорції 16:9, а зображення заповнюватиме його без спотворення.
object-fit без розмірів контейнера.image {
object-fit: cover;
}Саме по собі це не створює область для кадрування. Щоб побачити результат, елементу потрібно задати ширину та висоту або розмір батьківського контейнера.
.image {
width: 100%;
height: 240px;
object-fit: cover;
}contain заповнить усю областьcontain навмисно залишає вільний простір, якщо пропорції зображення й контейнера різні. Якщо потрібно прибрати порожні області, використовуйте cover, але пам’ятайте про можливе обрізання.
cover може обрізати обличчя, текст на банері або частину товару. У такому разі:
змініть object-position;
використайте contain;
підготуйте зображення з відповідними пропорціями.
object-fit до звичайного контейнераobject-fit призначений для замінених елементів, таких як <img> і <video>. Для <div> із фоновим зображенням потрібно використовувати background-size і background-position.
object-fit керує масштабуванням і кадруванням вмісту <img> та <video>.
fill розтягує вміст і може спотворити його.
contain показує весь вміст, але може залишити вільний простір.
cover заповнює контейнер, зберігаючи пропорції, але може обрізати краї.
none не масштабує вміст.
scale-down обирає менший варіант між none і contain.
object-position визначає, яку частину вмісту залишити в центрі кадру.
Для роботи object-fit потрібно визначити розмір самого елемента або його контейнера.
Для фонових зображень використовують background-size і background-position.