Как работает свойство aspect-ratio в CSS?

Свойство aspect-ratio в CSS помогает задать соотношение сторон для элемента. doka.guide Оно вычисляет незаданную сторону, исходя из размера уже известной. doka.guide

Некоторые значения свойства и их описание:

• auto. doka.guide webref.ru Соотношение сторон считается автоматически. doka.guide Если у элемента нет предпочитаемого соотношения сторон, браузер устанавливает его, исходя из ширины и высоты элемента. code.mu webref.ru
• «width» / «height». doka.guide Соотношение сторон всегда считается относительно ширины и высоты блока. doka.guide Если какое-то значение не указано, то оно считается равным 1. code.mu webref.ru
• auto «width» / «height». doka.guide Совмещённая запись. doka.guide При такой записи соотношение «width» / «height» приоритетнее, но когда у элемента есть собственное соотношение сторон, применится оно. doka.guide

Пример работы свойства: если задать aspect-ratio: 2 / 1, то соотношению должны равняться и стороны блока. doka.guide Например, если известна ширина — 200px, то 2 / 1 = 200 / height, откуда высота блока — 100px. doka.guide

Свойство aspect-ratio применяется ко всем элементам, за исключением строчно-блочных. webref.ru