En boy oranı

Yükseklik, daha hiçbir şey yüklenmeden genişlikten bilinir; bu yüzden geç gelen bir görsel ya da gömülü içerik sayfanın gerisini aşağı itmez. Çocuk kutuyu doldurur ve mektup kutusu yapılmak yerine kırpılır.

Temel en-boy oranı

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

Sık kullanılan oranlar

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),
    ),
  ),
)

Gömülü içerikler

Bu bileşenin var olma nedeni: bir <iframe> öğesinin kendine ait bir boyutu yoktur, bu yüzden bir oran olmadan çöker ya da elle yazılmış bir yükseklik ister.

buraya bir <iframe> gelirdi

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)">buraya bir &lt;iframe&gt; gelirdi</div>',
)

Bir kartın içinde

cardMedia() bunu bir kartın üstü için zaten yapar. Kutu başka bir yerdeyse aspectRatio() işlevine uzanın.

cardMedia — yerleşik

aspectRatio — başka her yerde

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 — yerleşik')),
  ),
  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 — başka her yerde'),
      ),
    ),
  ),
)

Kırpma

Çocuk, doldurmak üzere gerilir ve object-fit: cover ile kırpılır. Kırpılmaması gereken bir şey için — bir logo, bir şema — bu sayfadaki her tanıtımın yaptığı gibi çocuğa object-fit: contain verin.

Proplar

Prop	Tür	Varsayılan	Açıklama
`ratio`	`string`	`'16 / 9'`	Herhangi bir CSS aspect-ratio değeri.
`as`	`string`	`'div'`	İşlenecek öğe.