Aspyn

Aspect Ratio

Fixed-ratio containers for media.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens
import { AspectRatio } from "@aspyn-io/kit";

16:9 media container

16:9 — property photo, map snapshot, video
<AspectRatio ratio={16 / 9}>
  <img src={property.photo_url} alt="Property" className="h-full w-full rounded-md object-cover" />
</AspectRatio>

Notes

  • Prevents layout shift for images/maps/embeds of unknown intrinsic size.