Khung giữ tỉ lệ
Dùng để đặt sẵn chiều cao của ô trước khi ảnh hay video đến, nhờ vậy trang không xô lệch khi đang đọc.
Xem trước trực tiếp
Nguồn
<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; }Cách dùng
- Bọc quanh mọi thứ đến muộn — bản đồ, biểu đồ, video nhúng
- Đổi tỉ lệ ở một chỗ duy nhất, --dc-ratio, để có 16:9, 4:3 hay 1:1
- Cho ảnh bên trong lấp kín ô bằng object-fit: cover
Điểm cần lưu ý
- Tỉ lệ dọc cao chiếm trọn màn hình nhỏ — hãy thêm max-height
- Đừng trộn thủ thuật padding-top cũ; chỉ dùng một cách là aspect-ratio