Image

Image hiển thị ảnh với các tuỳ chọn cách lấp khung, bo góc, viền và đổ bóng; AspectRatio giữ khung đúng tỉ lệ.

fit quyết định ảnh lấp khung chứa ra sao (none, center, contain, cover). AspectRatio (theo shadcn) dùng CSS aspect-ratio để giữ chỗ trước khi ảnh tải xong, tránh nhảy bố cục.

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 { Image, 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.

fit="none"

fit="center"

fit="contain"

fit="cover"

Fit

Cách ảnh lấp một khung cố định 144 × 112.

Shape

square (mặc định), rounded, circular.

Viền & bóng

bordered thêm viền stroke-1; shadow dùng shadow-4 như Card.

AspectRatio

Khung 16 / 9 và 1 / 1; nội dung bên trong lấp đầy khung.

Cách dùng

Nên

Luôn có alt mô tả nội dung; alt="" cho ảnh thuần trang trí.
Dùng AspectRatio cho ảnh tải từ mạng để tránh nhảy bố cục.
Dùng fit="cover" cho thumbnail, "contain" khi phải thấy toàn bộ ảnh.

Không nên

Không kéo méo ảnh bằng width/height lệch tỉ lệ mà không đặt fit.
Không dùng circular cho ảnh không phải chân dung / logo.
Không đặt chữ quan trọng chồng lên ảnh mà không có nền đảm bảo tương phản.

Props

Prop · Kiểu	Mặc định	Mô tả
fit"none" \| "center" \| "contain" \| "cover" \| "default"	Mặc định: "default"	Cách ảnh lấp khung chứa (object-fit).
shape"square" \| "rounded" \| "circular"	Mặc định: "square"	Bo góc 0 / 4px / tròn.
borderedboolean	Mặc định: false	Viền 1px stroke-1.
shadowboolean	Mặc định: false	Đổ bóng shadow-4.
blockboolean	Mặc định: false	Ảnh rộng 100% khung chứa.
AspectRatio.rationumber	Mặc định: 1	Tỉ lệ rộng / cao, ví dụ 16 / 9.