Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Aspect box

For reserving a slot's height before its picture or video arrives, so the page never shifts under the reader.

Media

Live preview

Source

<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; }

How to use it

  • Wrap it around anything that arrives late — maps, charts, embedded video
  • Change the ratio in one place, --dc-ratio, to get 16:9, 4:3 or 1:1
  • Let the image inside fill the box with object-fit: cover

Watch out for

  • A tall ratio swallows a small screen whole — pair it with a max-height
  • Don't mix in the old padding-top trick; keep one mechanism, aspect-ratio

Next