Lompat ke konten
EN KO VI NE KM ID
Desain kartu nama English Koleksi karakter 16 desain · PNG / SVG / PDF

Kotak rasio

Untuk memesan tinggi sebuah slot sebelum gambar atau videonya datang, supaya halaman tidak bergeser saat dibaca.

Media

Pratinjau langsung

Sumber

<div class="dc-ratio">
  <span class="dc-ratio__label">16 : 9 자리</span>
</div>
.dc-ratio {
  --dc-ratio: 16 / 9;
  display: grid; place-items: center;
  aspect-ratio: var(--dc-ratio);
  width: 100%; max-width: 420px;
  border: 1px dashed var(--dc-line-bold);
  border-radius: var(--dc-r-md);
  background: repeating-linear-gradient(45deg,
    var(--dc-sunken), var(--dc-sunken) 8px,
    color-mix(in srgb, var(--dc-line) 70%, var(--dc-sunken)) 8px,
    color-mix(in srgb, var(--dc-line) 70%, var(--dc-sunken)) 16px);
  color: var(--dc-text-sub);
  font-family: var(--dc-font); font-size: 13px;
}
.dc-ratio__label {
  padding: 2px var(--dc-2);
  border-radius: var(--dc-r-full);
  background: var(--dc-surface);
  font-variant-numeric: tabular-nums;
}
.dc-ratio--square { --dc-ratio: 1 / 1; max-width: 240px; }
.dc-ratio--portrait { --dc-ratio: 9 / 16; max-width: 200px; max-height: 70vh; }
.dc-ratio-set { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--dc-3); }
.dc-ratio-set .dc-ratio { width: 160px; max-width: none; }

Cara memakainya

  • Bungkus apa pun yang datang belakangan — peta, grafik, video tersemat
  • Ubah rasio di satu tempat saja, --dc-ratio, untuk 16:9, 4:3, atau 1:1
  • Biarkan gambar di dalamnya mengisi penuh dengan object-fit: cover

Hal yang perlu diwaspadai

  • Rasio tegak yang tinggi menelan seluruh layar kecil — sertakan max-height
  • Jangan campur trik padding-top lama; cukup satu cara, aspect-ratio

Berikutnya