UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Aspect Ratio

aspect-ratioui
Boilerplate repo

Wraps content (typically images, video, or iframes) at a fixed width:height ratio so it never letterboxes or jumps as it loads. Common ratios: 16/9 for video, 1/1 for avatars, 4/3 for cards.

Installation

$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/aspect-ratio.json
Manifest:https://uipkge.dev/r/svelte/aspect-ratio.jsonInstalls to:src/lib/components/ui/aspect-ratio/

Examples

Loading interactive previews…

Props

NameType / ValuesDefaultRequired
ratio

Width / height. `16 / 9` for video, `1` for squares, `4 / 3` for cards.

number1optional
refHTMLDivElement | null—optional

Files installed (2)

  • src/lib/components/ui/aspect-ratio/AspectRatio.svelte0.8 kB
    <script lang="ts" module>
  import type { HTMLAttributes } from 'svelte/elements'

  export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
    /** Width / height. `16 / 9` for video, `1` for squares, `4 / 3` for cards. */
    ratio?: number
    ref?: HTMLDivElement | null
  }
</script>

<script lang="ts">
  import { cn } from '$lib/utils'

  let { ratio = 1, class: className, children, ref = $bindable(null), ...restProps }: AspectRatioProps = $props()

  const paddingBottom = $derived(`${100 / (ratio > 0 ? ratio : 1)}%`)
</script>

<div
  bind:this={ref}
  data-uipkge=""
  data-slot="aspect-ratio"
  style:position="relative"
  style:width="100%"
  style:padding-bottom={paddingBottom}
  class={cn(className)}
  {...restProps}
>
  <div style:position="absolute" style:inset="0">
    {@render children?.()}
  </div>
</div>
  • src/lib/components/ui/aspect-ratio/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/svelte/aspect-ratio.json