✨ Working with PDFs, images or videos? Discover 145+ free web apps built for everyday tasks
Wensity

Aspect Ratio

A media container with five preset ratios and a built-in image loader that crossfades in from a shimmer placeholder.

aspect ratiomediaimagevideoratioresponsive
Loading preview...

Examples

Practical examples and common states for the same installable component.

Video

Widescreen ratio optimized for video embeds.

examples/aspect-ratio-video.tsx
import {
  AspectRatio,
  AspectRatioImage,
} from "@/components/wensity/aspect-ratio";


export function AspectRatioVideo() {
  return (
    <AspectRatio variant="video" className="max-w-md">
      <AspectRatioImage
        src="https://images.unsplash.com/photo-1616763355548-1b606f439f86?auto=format&fit=crop&w=1200&q=80"
        alt="Video call interface on a laptop screen"
      />
    </AspectRatio>
  );
}

Portrait

Vertical ratio for stories and mobile media.

examples/aspect-ratio-portrait.tsx
import {
  AspectRatio,
  AspectRatioImage,
} from "@/components/wensity/aspect-ratio";


export function AspectRatioPortrait() {
  return (
    <AspectRatio variant="portrait" className="max-w-xs">
      <AspectRatioImage
        src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=700&q=80"
        alt="Portrait photo of a person"
      />
    </AspectRatio>
  );
}

Square

Equal dimensions for avatars and galleries.

examples/aspect-ratio-square.tsx
import {
  AspectRatio,
  AspectRatioImage,
} from "@/components/wensity/aspect-ratio";


export function AspectRatioSquare() {
  return (
    <AspectRatio variant="square" className="max-w-xs">
      <AspectRatioImage
        src="https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=900&q=80"
        alt="Studio avatar photo"
      />
    </AspectRatio>
  );
}

Cinema

Ultra-wide ratio for banners and showcases.

examples/aspect-ratio-cinema.tsx
import {
  AspectRatio,
  AspectRatioImage,
} from "@/components/wensity/aspect-ratio";


export function AspectRatioCinema() {
  return (
    <AspectRatio variant="cinema" className="max-w-lg">
      <AspectRatioImage
        src="https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?auto=format&fit=crop&w=1400&q=80"
        alt="Wide cinematic landscape banner"
      />
    </AspectRatio>
  );
}

Photo

Classic ratio for images and photography.

examples/aspect-ratio-photo.tsx
import {
  AspectRatio,
  AspectRatioImage,
} from "@/components/wensity/aspect-ratio";


export function AspectRatioPhoto() {
  return (
    <AspectRatio variant="photo" className="max-w-sm">
      <AspectRatioImage
        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=1000&q=80"
        alt="Classic framed mountain photograph"
      />
    </AspectRatio>
  );
}