Aspect-ratio помогает оптимизировать веб-макеты под разные размеры экранов путем поддержания постоянного соотношения сторон. 4 Это означает, что ширина и высота изображения будут изменяться пропорционально друг другу, а детали изображения останутся неизменными независимо от размера. 4

Вот несколько случаев, когда это важно:

• подготовка контейнеров для изображений, видео и встраиваемых материалов, чтобы предотвратить дёргание и перестройку макета во время их загрузки; 1
• создание единообразного адаптивного пространства для интерактивной визуализации данных (графиков и т. п.) или SVG-анимации; 1
• создание единообразного адаптивного пространства для многоэлементных компонентов, например карточек или календариков с датами; 1
• создание единообразного адаптивного пространства для нескольких изображений разного размера. 1