Yugen UI

AspectRatio

AspectRatio giữ một khung đúng tỉ lệ rộng / cao bất kể chiều rộng — cho video, ảnh, avatar, banner và story.

Dùng thuộc tính CSS aspect-ratio nên giữ chỗ ngay từ đầu, không nhảy bố cục khi ảnh / video tải xong. Khung rộng 100% vùng chứa (ghi đè bằng className như w-24), bo góc và cắt nội dung tràn; con bên trong lấp đầy khung (Image fit="cover", BloomArt, size-full).
4:32

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { AspectRatio } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Bloom theo brand — 4:3

4:3 — ảnh minh hoạ

Tỉ lệ ảnh chụp cổ điển; hợp cho thẻ bài viết và thumbnail sản phẩm.

  • NA
  • TB
  • LC
  • PD
  • HH
  • VK
  • ĐL
  • BN

1:1 — lưới avatar

Ô vuông co giãn theo cột lưới; rounded-circular cho avatar, rounded-xlarge cho ảnh sản phẩm.

Mùa hoa 2026

Lịch hoa nở theo từng vùng

21:9 — banner

Dải hero rộng; chữ đặt trên thẻ neutral để đủ tương phản thay vì trực tiếp trên gradient.

Ueno
Kyoto
Hokkaido

9:16 — story

Khung dọc toàn màn hình điện thoại; đặt chiều rộng cố định (w-24) và để chiều cao tự tính.

Cách dùng

Nên
  • Bọc ảnh / video tải từ mạng trong AspectRatio để giữ chỗ, tránh nhảy bố cục (CLS).
  • Dùng tỉ lệ chuẩn của nội dung: 16:9 video, 4:3 ảnh, 1:1 avatar, 21:9 banner, 9:16 story.
  • Cho con lấp đầy khung: Image fit="cover" hoặc lớp size-full.
Không nên
  • Không đặt cả chiều cao cố định lẫn ratio — chiều cao sẽ thắng và khung méo.
  • Không đặt chữ quan trọng trực tiếp lên ảnh / gradient mà không có nền đảm bảo tương phản.
  • Không dùng 9:16 cho nội dung cần đọc trên desktop — quá hẹp.

Props

Prop · KiểuMặc địnhMô tả
rationumberMặc định: 1Tỉ lệ rộng / cao, ví dụ 16 / 9, 4 / 3, 21 / 9, 9 / 16.
classNamestringMặc định: —Bo góc, nền, chiều rộng (mặc định w-full); khung luôn relative và overflow-hidden.
styleCSSPropertiesMặc định: —Gộp sau aspect-ratio — có thể ghi đè.
...propsHTMLAttributes<HTMLDivElement>Mặc định: —Truyền xuống thẻ div bao ngoài.