비율 유지 상자

사진이나 영상이 아직 오지 않았을 때도 자리 높이를 미리 잡아, 나중에 화면이 밀려 움직이지 않게 하는 조각.

실제 미리보기

출처

HTML CSS

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

이렇게 씁니다

지도·차트·영상처럼 내용이 늦게 도착하는 칸을 이것으로 먼저 감싼다
비율은 --dc-ratio 한 군데만 바꿔 16:9, 4:3, 1:1 로 쓴다
안에 들어가는 사진은 object-fit: cover 로 칸을 꽉 채운다

주의할 점

세로로 긴 비율은 작은 화면을 한 번에 다 먹는다 — max-height 를 같이 걸어라
옛 padding-top 방식을 섞어 쓰지 마라 — aspect-ratio 한 가지로 통일한다

다음에 볼 것