Соотношение сторон

Высота известна из ширины ещё до того, как что-либо загрузилось, поэтому опоздавшая картинка или встраивание не сдвигает остальную страницу вниз. Дочерний элемент заполняет блок и обрезается, а не обрастает полями.

Простое соотношение

aspectRatio({ ratio: '16 / 9', style: 'background: var(--su-surface-2)' },
  '<img src="/logo.svg" alt="" style="object-fit: contain; padding: 2rem">',
)

Частые соотношения

16 / 9
4 / 3
1 / 1
3 / 4
grid({ min: '9rem' },
  ...['16 / 9', '4 / 3', '1 / 1', '3 / 4'].map((ratio) =>
    stack({ gap: 'xs' },
      aspectRatio({ ratio, style: 'background: var(--su-surface-2); border-radius: 0.5rem' },
        '<img src="/logo.svg" alt="" style="object-fit: contain; padding: 1rem">'),
      text({ variant: 'caption', tone: 'muted', align: 'center' }, ratio),
    ),
  ),
)

Встраивания

Ради чего этот компонент и существует: у <iframe> нет собственного размера, поэтому без соотношения он схлопывается или требует жёстко заданной высоты.

здесь был бы <iframe>
aspectRatio({ ratio: '16 / 9', style: 'background: var(--su-surface-2); border-radius: 0.6rem' },
  '<div style="display: grid; place-items: center; color: var(--su-text-subtle)">здесь был бы &lt;iframe&gt;</div>',
)

В карточке

cardMedia() уже делает это в верхней части карточки. Берите aspectRatio(), когда блок находится в другом месте.

cardMedia — встроено

aspectRatio — где угодно ещё

grid({ min: '12rem' },
  card(
    cardMedia({ src: '/logo.svg', alt: '', style: 'background: var(--su-surface-2); object-fit: contain; padding: 1rem' }),
    cardBody(text({ variant: 'small' }, 'cardMedia — встроено')),
  ),
  card(
    cardBody(
      stack({ gap: 'sm' },
        aspectRatio({ ratio: '1 / 1', style: 'background: var(--su-surface-2); border-radius: 0.5rem' },
          '<img src="/logo.svg" alt="" style="object-fit: contain; padding: 1rem">'),
        text({ variant: 'small' }, 'aspectRatio — где угодно ещё'),
      ),
    ),
  ),
)

Обрезка

Дочерний элемент растягивается на весь блок и обрезается по object-fit: cover. Для того, что обрезать нельзя — логотипа, схемы — поставьте на него object-fit: contain, как это делает каждое демо на этой странице.

Пропсы

ПропТипПо умолчаниюОписание
ratiostring'16 / 9'Любое CSS-значение aspect-ratio.
asstring'div'Какой элемент рендерить.