aspect-ratio

Помогает задать соотношение сторон для элемента.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Свойство задаёт соотношение сторон для элемента.

Открыть демо в новой вкладке

Пример

Секция статьи "Пример"

Код ниже стилизует блок так, что его высота будет равна его ширине:

        
          
          .container {  width: 200px;  aspect-ratio: 1 / 1;}
          .container {
  width: 200px;
  aspect-ratio: 1 / 1;
}

        
        
          
        
      

Подобное поведение можно получить и в случае, когда задана только высота:

        
          
          .container {  height: 200px;  aspect-ratio: 1 / 1;}
          .container {
  height: 200px;
  aspect-ratio: 1 / 1;
}

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"
  • auto — соотношение сторон считается автоматически.
  • <width> / <height> — соотношение сторон всегда считается относительно ширины и высоты блока.
  • auto <width> / <height> — совмещённая запись.

При совмещённой записи соотношение <width> / <height> приоритетнее, но когда у элемента есть собственное соотношение сторон, применится оно:

Открыть демо в новой вкладке

Если использовать значение auto 1 / 1 для <img>, то применится соотношение сторон фотографии. Это происходит, потому что она имеет собственное соотношение сторон. При значении 1 / 1 мы принудительно применим соотношение сторон 1 к 1.

Чтобы избежать искажений картинки, можно использовать свойство object-fit.

Как понять

Секция статьи "Как понять"

Свойство вычисляет незаданную сторону, исходя из размера уже известной. Возьмём пример с aspect-ratio: 2 / 1:

        
          
          .container {  width: 200px;  aspect-ratio: 2 / 1;}
          .container {
  width: 200px;
  aspect-ratio: 2 / 1;
}

        
        
          
        
      

Соотношение сторон в этом случае — 2 / 1. Такому соотношению должны равняться и стороны блока: <width> / <height>.

Нам известна ширина — 200px.

21 = 200height

Отсюда получаем высоту блока — 100px.

Подсказки

Секция статьи "Подсказки"

💡 Свойство нельзя применить к строчным элементам.

💡 Хотя большинство значений поддерживается основными браузерами, с некоторыми могут быть трудности. Поэтому на всякий случай проверяйте поддержку на Can I use.