Aspect ratio

让内容保持固定的宽高比，图片、视频与地图在加载过程中不会造成布局跳动。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/aspect-ratio

示例

16 : 9 的地图

The route from the rail yards to the north gate

aspect-ratio-map.tsx

import { AspectRatio } from "@/components/zero/aspect-ratio";export default function AspectRatioMap() {  return (    <div className="w-full max-w-md">      <AspectRatio        ratio={16 / 9}        className="border-(length:--zero-stroke) border-zero-ink"      >        {/* biome-ignore lint/performance/noImgElement: a small SVG sample, and the demo is copied into projects without next/image */}        <img          src="/samples/route-map.svg"          alt="The route from the rail yards to the north gate"        />      </AspectRatio>    </div>  );}

行为

内容填满容器；其中的图片会被裁切，以完整覆盖容器。

属性

AspectRatio

属性	类型	默认值	说明
ratio	number	16 / 9	宽度除以高度。