CSS співвідношення сторін

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

Що таке aspect-ratio?

aspect-ratio визначає бажане співвідношення ширини до висоти елемента. Браузер автоматично обчислює один з розмірів, якщо інший встановлений.

Синтаксис

css

.element {
  aspect-ratio: 16 / 9;  /* ширина / висота */
  aspect-ratio: 1 / 1;    /* квадрат */
  aspect-ratio: 4 / 3;    /* класичне співвідношення */
  aspect-ratio: auto;     /* за замовчуванням */
}

Основне використання

Простий приклад

css

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

Результат: Контейнер завжди матиме співвідношення 16:9, незалежно від ширини екрану.

Зображення

css

.image-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Співвідношення	CSS Значення	Використання
1:1	`aspect-ratio: 1 / 1`	Квадратні зображення, аватари
4:3	`aspect-ratio: 4 / 3`	Класичні фотографії, старі монітори
16:9	`aspect-ratio: 16 / 9`	Відео, сучасні екрани
21:9	`aspect-ratio: 21 / 9`	Ультраширокі екрани, кінематографічний формат
3:2	`aspect-ratio: 3 / 2`	Фотографії, друк

Практичні приклади

Адаптивне відео

html

<div class="video-wrapper">
  <iframe 
    src="https://www.youtube.com/embed/..." 
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

css

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Картки продуктів

html

<div class="product-grid">
  <div class="product-card">
    <div class="product-image">
      <img src="product.jpg" alt="Продукт">
    </div>
    <div class="product-info">
      <h3>Назва продукту</h3>
      <p>Ціна: $100</p>
    </div>
  </div>
</div>

css

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f0f0f0;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Галерея зображень

css

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.gallery-item {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

Поєднання з іншими властивостями

З max-width та min-width

css

.responsive-container {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
}

З padding для відступів

css

.content-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 1rem;
  box-sizing: border-box;
}

З Grid та Flexbox

css

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.grid-item {
  aspect-ratio: 1 / 1;
  background: #f0f0f0;
}

Перезапис aspect-ratio

Якщо встановлені обидва width і height, aspect-ratio може бути перезаписано:

css

.element {
  width: 300px;
  height: 200px;
  aspect-ratio: 1 / 1; /* ігнорується, оскільки обидва розміри встановлені */
}

Щоб aspect-ratio працював, потрібно встановити лише один розмір:

css

.element {
  width: 300px;
  /* висота не встановлена */
  aspect-ratio: 1 / 1; /* висота буде 300px */
}

Резервний варіант для старих браузерів

Для браузерів, які не підтримують aspect-ratio, можна використовувати трюк з padding:

css

.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 = 9/16 * 100% */
}

.aspect-ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Сучасний підхід */
@supports (aspect-ratio: 1) {
  .aspect-ratio-box {
    padding-bottom: 0;
    aspect-ratio: 16 / 9;
  }
}

Використання з змінними

css

:root {
  --video-ratio: 16 / 9;
  --image-ratio: 4 / 3;
}

.video {
  aspect-ratio: var(--video-ratio);
}

.image {
  aspect-ratio: var(--image-ratio);
}

Підтримка браузерами

aspect-ratio підтримується в:

Chrome 88+
Firefox 89+
Safari 15+
Edge 88+

Для старіших браузерів використовуйте трюк з padding або полифіл.

Переваги aspect-ratio

Простота: Не потрібно вручну обчислювати висоту
Адаптивність: Автоматично адаптується до ширини
Чистий код: Менше CSS, більше семантики
Продуктивність: Браузер оптимізує обчислення

Порада:

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань