Skip to main content

AspectRatio

AspectRatio

Constrains content to a fixed width-to-height ratio

Tags: component media layout

View Demo

AspectRatio holds a box at a fixed width-to-height ratio, reserving the space its content will occupy. Wrapping media in it prevents the page from jumping as images and videos load.

Import​

<script>
  import { AspectRatio } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<AspectRatio ratio="video">
  <img src="/cover.jpg" alt="Cover art" class="h-full w-full object-cover" />
</AspectRatio>

Props​

Prop Type Default Description
ratio 'square' | 'video' | 'photo' | 'portrait' | 'wide' | number 'video' Width-to-height ratio, named or as a raw number
class string - Additional CSS classes for the content box

Named Ratios​

Name Ratio Typical use
square 1 / 1 Avatars, gallery tiles
video 16 / 9 Video and embeds
photo 4 / 3 Photography
portrait 3 / 4 Vertical photography
wide 21 / 9 Cinematic banners

Custom Ratios​

Any number works, so ratios outside the named set need no extra configuration:

<AspectRatio ratio={2.35}>
  <img src="/cinemascope.jpg" alt="Wide shot" class="h-full w-full object-cover" />
</AspectRatio>

Accessibility​

AspectRatio renders a plain container and adds no semantics of its own. Give its content whatever roles and labels it needs.

  • Image - Wraps AspectRatio automatically when given a ratio
  • MediaEmbed - Uses AspectRatio for provider embeds
  • MediaGrid - Applies a shared ratio across every tile
On this page