Пошук уроків, статей та іншого контенту
Задасте пропорції блоків і медіа через aspect-ratio, щоб запобігати стрибкам макета.
aspect-ratioВластивість aspect-ratio задає бажане співвідношення ширини та висоти елемента.
.card-media {
aspect-ratio: 16 / 9;
}Це означає: якщо ширина блока становить 16 умовних одиниць, його висота має становити 9 умовних одиниць.
Наприклад:
ширина 320px → висота 180px;
ширина 640px → висота 360px;
ширина 100% → висота обчислюється автоматично.
Властивість особливо корисна для:
зображень;
відео;
прев’ю статей;
карток товарів;
iframe;
рекламних блоків;
порожніх контейнерів, для яких контент завантажується пізніше.
.element {
aspect-ratio: ширина / висота;
}Приклади поширених пропорцій:
.video {
aspect-ratio: 16 / 9;
}
.square {
aspect-ratio: 1 / 1;
}
.portrait {
aspect-ratio: 3 / 4;
}Значення 1 / 1 створює квадрат. Також можна записати його як одне число:
.square {
aspect-ratio: 1;
}Щоб пропорції працювали, хоча б один розмір елемента має бути автоматичним.
.box {
width: 400px;
aspect-ratio: 16 / 9;
}У цьому випадку браузер обчислить висоту:
400 × 9 / 16 = 225pxЯкщо задано висоту, ширина обчислюється аналогічно:
.box {
height: 225px;
aspect-ratio: 16 / 9;
}Якщо одночасно явно задати і width, і height, вони зазвичай мають пріоритет над пропорціями:
.box {
width: 400px;
height: 300px;
aspect-ratio: 16 / 9;
}Такий блок матиме розмір 400 × 300px, а не пропорцію 16:9.
Поширений сценарій — блок, ширина якого змінюється разом із батьківським контейнером, а висота підтримує пропорцію.
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aspect ratio</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 24px;
font-family: sans-serif;
background: #f1f5f9;
}
.page {
width: min(100%, 720px);
margin: 0 auto;
}
.media {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 12px;
background: #cbd5e1;
}
.media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<main class="page">
<div class="media">
<img
src="https://picsum.photos/id/1015/1280/720"
alt="Гірський пейзаж"
>
</div>
</main>
</body>
</html>Тут:
.media має співвідношення 16:9.
Його ширина дорівнює ширині батьківського контейнера.
Висота обчислюється автоматично.
Зображення займає весь контейнер завдяки width: 100% і height: 100%.
object-fit: cover заповнює контейнер без спотворення зображення.
Якщо розмір вікна зміниться, ширина і висота контейнера зміняться синхронно.
object-fit для зображеньaspect-ratio визначає форму контейнера, але не пояснює, як саме розмістити всередині нього зображення.
Для цього використовується object-fit.
.image {
width: 100%;
height: 100%;
object-fit: cover;
}cover зберігає пропорції зображення, але може обрізати його краї.
.image {
width: 100%;
height: 100%;
object-fit: contain;
background: #e2e8f0;
}contain показує зображення повністю, але можуть з’явитися вільні області навколо нього.
aspect-ratio зручно використовувати для однакових прев’ю в списку карток.
<section class="products">
<article class="product">
<div class="product__image">
<img
src="https://picsum.photos/id/1060/800/1000"
alt="Прев’ю товару"
>
</div>
<h2>Рюкзак</h2>
</article>
<article class="product">
<div class="product__image">
<img
src="https://picsum.photos/id/21/800/1000"
alt="Прев’ю товару"
>
</div>
<h2>Ноутбук</h2>
</article>
</section>.products {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
max-width: 640px;
}
.product__image {
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 8px;
background: #e2e8f0;
}
.product__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.product h2 {
margin: 8px 0 0;
font-size: 1rem;
}Незалежно від фактичних розмірів файлів усі прев’ю матимуть однакову форму 4:5.
Якщо зображення завантажується після появи сторінки, браузер спочатку може не знати його висоту. Через це наступний контент тимчасово розташовується вище, а після завантаження зображення зміщується вниз.
Такий ефект називають стрибком макета.
Фіксована пропорція резервує місце ще до завантаження медіа:
.preview {
aspect-ratio: 16 / 9;
overflow: hidden;
background: #cbd5e1;
}
.preview img {
width: 100%;
height: 100%;
object-fit: cover;
}Браузер одразу знає висоту .preview, тому контент під ним не зміщується після завантаження зображення.
/* Широкий банер або відео */
.banner {
aspect-ratio: 16 / 9;
}
/* Квадратна аватарка */
.avatar {
aspect-ratio: 1 / 1;
border-radius: 50%;
}
/* Вертикальна картка товару */
.product-image {
aspect-ratio: 3 / 4;
}
/* Публікація у вертикальному форматі */
.post-image {
aspect-ratio: 4 / 5;
}Пропорція не повинна залежати від конкретної ширини екрана. Вона описує форму блока, а не його абсолютний розмір.
aspect-ratio і мінімальні розміриНа фактичний розмір елемента можуть впливати min-width, min-height, max-width і max-height.
Наприклад:
.card {
width: 100%;
max-width: 400px;
aspect-ratio: 16 / 9;
min-height: 180px;
}Якщо розрахована висота буде меншою за 180px, спрацює min-height, і блок стане вищим за пропорцію 16:9.
Це очікувана поведінка: обмеження розміру можуть змінити результат, обчислений за пропорціями.
Пропорцію можна змінювати для різних ширин екрана:
.hero {
aspect-ratio: 4 / 3;
}
@media (min-width: 768px) {
.hero {
aspect-ratio: 16 / 7;
}
}На вузькому екрані блок буде вищим, щоб важливий вміст залишався читабельним. На широкому екрані він стане більш панорамним.
Водночас для більшості компонентів достатньо однієї сталої пропорції. Не варто додавати медіазапити без потреби.
aspect-ratio.box {
aspect-ratio: 16 / 9;
}Якщо ширина блока не визначається батьківським контейнером або іншими стилями, його розмір може бути не таким, як очікується.
Надійніший варіант для адаптивного блока:
.box {
width: 100%;
aspect-ratio: 16 / 9;
}.preview img {
width: 100%;
height: 100%;
}Якщо пропорції зображення і контейнера різні, зображення може спотворитися. Додайте:
.preview img {
object-fit: cover;
}або:
.preview img {
object-fit: contain;
}.preview {
width: 100%;
height: 200px;
aspect-ratio: 16 / 9;
}На різних ширинах екрану блок залишатиметься заввишки 200px, тому пропорція не буде підтримуватися.
Якщо висота має обчислюватися автоматично, приберіть height:
.preview {
width: 100%;
aspect-ratio: 16 / 9;
}aspect-ratio використовується для обрізання контентуaspect-ratio визначає розмір блока, але не обрізає його вміст. Для зображень потрібні overflow і object-fit:
.preview {
aspect-ratio: 1 / 1;
overflow: hidden;
}
.preview img {
width: 100%;
height: 100%;
object-fit: cover;
}Якщо всередині блока є великий текст або інший контент, фактична висота може збільшитися, щоб умістити його.
Якщо блок має бути суворо обмежений заданою формою, можна приховати переповнення:
.preview {
aspect-ratio: 16 / 9;
overflow: hidden;
}Для текстового контенту це слід робити обережно, щоб не приховати важливу інформацію.
aspect-ratio задає співвідношення ширини та висоти елемента.
Запис aspect-ratio: 16 / 9 створює пропорцію 16:9.
Для автоматичного розрахунку висоти зазвичай задають width і не задають height.
Властивість підходить для зображень, відео, карток і медіаконтейнерів.
Для зображення всередині блока зазвичай потрібні width: 100%, height: 100% і object-fit.
Резервування місця через aspect-ratio допомагає запобігати стрибкам макета під час завантаження медіа.
Явно задані width і height, а також мінімальні й максимальні розміри можуть змінити або обмежити розраховану пропорцію.