Свойство aspect-ratio CSS

определение и использование

aspect-ratio атрибут позволяет вам определить пропорцию ширины и высоты элемента.

если установлено aspect-ratio и ширина атрибут, высота будет корректироваться в соответствии с определенным пропорцией.

чтобы лучше понять aspect-ratio атрибут, см. демонстрацию.

подсказка:в рессponsive design aspect-ratio атрибут, когда размер элемента часто меняется, вы хотите поддерживать пропорцию ширины и высоты.

пример

пример 1

добавить пропорцию элемента:

div {
  aspect-ratio: 3 / 2;
}

попробуйте сами

пример 2

если размер div элемента нужно изменить:aspect-ratio Этот атрибут очень подходит для управления пропорциями div элементов. Например, в библиотеке изображений вы хотите, чтобы размеры div элементов были гибкими, чтобы адаптироваться к любым устройствам, но в то же время поддерживать пропорции изображений:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>alley</div>
  <div>flowers by the street</div>
  <div>mountains</div>
  <div>Cinque Terre</div>
</div>

попробуйте сами

CSS синтаксис

aspect-ratio: number/number|initial|inherit;

значение атрибута

технические детали

поддержка браузеров

Числа в таблице показывают версию первого браузера, который полностью поддерживает этот атрибут.

с relevantными страницами

руководство:Модуль сеточной разметки CSS

ссылка:Свойство Object-fit в CSS

ссылка:Свойство Object-position в CSS