Использование aspect-ratio вместо padding-top намного понятнее и оставляет для свойства padding его обычное поведение. Для свойства aspect-ratio можно установить для соотношения сторон значение auto, где «замененные элементы с внутренним соотношением сторон используют это соотношение сторон; в противном случае блок не имеет предпочтительного соотношения сторон». Если указать одновременно значения auto и , то предпочтение будет соотношению сторон, определяемому делением width на height, если только это не замещаемый элемент с внутренним соотношением сторон (в этом случае используется его собственное соотношение сторон). Пример согласованности в сетке (grid) Этот пример чётко работает с механизмами компоновки, такими как CSS Grid и Flexbox. Рассмотрим список с дочерними элементами, для которых требуется сохранить соотношение сторон 1:1, например сетку логотипов спонсоров:
.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .sponsor img { aspect-ratio: 1 / 1; width: 100%; object-fit: contain;