AspectRatio
จาก shadcnครอบพื้นที่ให้คงอัตราส่วนกว้าง-สูงตามที่กำหนด เช่น วิดีโอ 16:9 หรือรูปถ่ายเอกสาร 4:3 ไม่ให้เลย์เอาต์เต้นขณะโหลด
วิดีโอแนะนำกองทุน — 16:9
สแกนสลิปเงินเดือน — 4:3
ติดตั้ง
Terminal
pnpm dlx shadcn@latest add @whereui/aspect-ratioต้องผูก registry และติดตั้ง @whereui/theme นำหน้าเสมอเมื่อติดตั้งครั้งแรก
การใช้งาน
import { AspectRatio } from "@/components/ui/aspect-ratio"<AspectRatio ratio={16 / 9} className="overflow-hidden rounded-xl border"> <img src="…" alt="…" className="size-full object-cover" /></AspectRatio>ข้อควรรู้
- ratio รับตัวเลข เช่น 16 / 9, 4 / 3, 1 หรือคำนวณจากขนาดจริงของสื่อก็ได้
- บนมือถือให้คุมความกว้างที่ element ด้านนอก เช่น max-w-md
ซอร์สโค้ด
components/ui/aspect-ratio.tsx
import { cn } from "cn"function AspectRatio({ ratio, className, ...props}: React.ComponentProps<"div"> & { ratio: number }) { return ( <div data-slot="aspect-ratio" style={ { "--ratio": ratio, } as React.CSSProperties } className={cn("relative aspect-(--ratio)", className)} {...props} /> )}export { AspectRatio }