CSS aspect-ratio — співвідношення сторін елемента

CSS властивість aspect-ratio задає співвідношення сторін елемента: 16 / 9, 1 / 1, 4 / 3. Висота порахується сама з ширини.

правити

Загальний опис

Це та властивість, яка поховала знаменитий «padding-bottom hack». Раніше, щоб зробити адаптивний контейнер для відео, писали padding-top: 56.25% і позиціонували вміст абсолютно — прийом працював, але виглядав як магія і потребував пояснень у коментарі.

Тепер достатньо aspect-ratio: 16 / 9. Елемент сам тримає пропорцію на будь-якій ширині.

Особливо корисно для карток у сітці: квадратні прев'ю (aspect-ratio: 1) не «стрибають» при завантаженні зображень.

правити

Порада

Разом із object-fit: cover це готовий рецепт прев'ю: пропорція фіксована, а зображення заповнює її без спотворень.

автор: NagarD правити

Нотатка

Якщо в елемента заданий і width, і height, aspect-ratio ігнорується — явні розміри мають пріоритет.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

aspect-ratio: auto | <ratio>;

Властивість aspect-ratio може отримувати 2 значень:

auto

Природне співвідношення сторін елемента (для зображень — з самого файлу).

автор: NagarD

правити

ratio

Співвідношення виду width / height, наприклад 16 / 9 або просто 1.5.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
aspect-ratio	88+	89+	15+	74+	88+	-

Підтримка: мобільні переглядачі

Переглядач
aspect-ratio	88+	yes	yes	15+

Приклади

+ запропонувати свій приклад у пісочниці

<div class="video">
    <iframe src="about:blank" title="Відео"></iframe>
</div>

<img class="thumb" src="/img/logo.svg" alt="Прев'ю">

.video {
    aspect-ratio: 16 / 9;
    background: #eee;
}

.video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* квадратне прев'ю без спотворень */
.thumb {
    aspect-ratio: 1;
    object-fit: cover;
    width: 150px;
}