aspect-ratio

CSS-властивість aspect-ratio визначає співвідношення ширини до висоти елемента. Вона дозволяє задавати співвідношення сторін для елементів, таких як зображення, відео або блоки, щоб вони зберігали свої пропорції при зміні розміру. Це особливо корисно для створення адаптивних макетів, де потрібно забезпечити, щоб елементи зберігали коректні пропорції.

Інтерактивний приклад використання

Синтаксис

aspect-ratio: <ratio> | auto;

Значення

  • <ratio> — співвідношення ширини до висоти елемента, задане у вигляді числа або дробу (наприклад, 16 / 9, 4 / 3). Наприклад:
    • 16 / 9 — стандартне співвідношення для відео високої чіткості (HD).
    • 4 / 3 — співвідношення для старих телевізорів або зображень середнього формату.
    • 1 / 1 — квадратне співвідношення (ширина дорівнює висоті).
  • auto — співвідношення обчислюється автоматично на основі фактичного вмісту елемента, якщо aspect-ratio не задано. Це значення є за замовчуванням для більшості елементів.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • Властивість aspect-ratio підтримується сучасними браузерами і дозволяє легко створювати адаптивні елементи з певними пропорціями, без використання додаткових медіа-запитів або складних обчислень через JavaScript.
  • Властивість aspect-ratio автоматично визначає висоту елемента на основі його ширини, якщо задано співвідношення, що дуже корисно для зображень, відео та інших мультимедійних елементів, щоб уникнути спотворення.
  • aspect-ratio дозволяє забезпечити динамічне масштабування елементів без спотворення, що робить її дуже корисною для створення адаптивних дизайнів.
  • Властивість підтримується всіма сучасними браузерами, включаючи Chrome, Firefox, Safari, і Edge.