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

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

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

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

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