Aspect Ratio
Displays content within a fixed aspect ratio.
Loading preview…
1<script lang="ts">
2 import { AspectRatio } from './index.js';
3</script>
4
5<div class="w-full max-w-md">
6 <AspectRatio ratio={16 / 9} class="overflow-hidden rounded-lg bg-muted">
7 <img
8 src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
9 alt="Gray by Drew Beamer"
10 class="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
11 />
12 </AspectRatio>
13</div>
14Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/aspect-ratio/index.ts
- ~/components/aspect-ratio/aspect-ratio.svelte
Usage
Use aspect ratio to constrain media or other content to a consistent width-to-height proportion.
Pass ratio as a number (for example 16 / 9 or 1).
1<script lang="ts">
2 import { AspectRatio } from '~/components/aspect-ratio';
3</script>
4
5<div class="w-[450px]">
6 <AspectRatio ratio={16 / 9} class="bg-muted">
7 <img
8 src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
9 alt="Gray by Drew Beamer"
10 class="h-full w-full rounded-md object-cover"
11 />
12 </AspectRatio>
13</div>