Rasio aspek

Tingginya sudah diketahui dari lebarnya sebelum apa pun dimuat, jadi gambar atau sematan yang datang terlambat tidak mendorong sisa halaman ke bawah. Anaknya mengisi kotak itu dan dipangkas alih-alih diberi bilah hitam.

Rasio aspek dasar

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

Rasio yang umum

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

Sematan

Alasan komponen ini ada: sebuah <iframe> tidak punya ukuran bawaan, jadi tanpa rasio ia mengempis atau butuh tinggi yang ditulis paksa.

sebuah <iframe> akan diletakkan di sini

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)">sebuah &lt;iframe&gt; akan diletakkan di sini</div>',
)

Di dalam kartu

cardMedia() sudah melakukan ini untuk bagian atas kartu. Raih aspectRatio() ketika kotaknya berada di tempat lain.

cardMedia — sudah tersedia

aspectRatio — di tempat lain mana pun

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 — sudah tersedia')),
  ),
  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 — di tempat lain mana pun'),
      ),
    ),
  ),
)

Pemangkasan

Anaknya diregangkan untuk mengisi lalu dipangkas dengan object-fit: cover. Untuk sesuatu yang tidak boleh dipangkas — logo, diagram — setel object-fit: contain pada anaknya, seperti yang dilakukan setiap demo di halaman ini.

Props

Prop	Tipe	Bawaan	Deskripsi
`ratio`	`string`	`'16 / 9'`	Nilai aspect-ratio CSS apa pun.
`as`	`string`	`'div'`	Elemen yang dirender.