aspect-ratio

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

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

        
          
          .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.

²⁄₁ = ²⁰⁰⁄_height

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

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

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