Aspect Ratio

Keeps a fixed width:height ratio; children (img/video/iframe) fill it.

Import

import { AspectRatio } from '@marbleui/ui'

Props

<AspectRatio>

Prop	Type	Default	Description
ratio	`number`	`16 / 9`	width / height, e.g. 16 / 9

Also accepts HTML element props (278).

Usage notes

Box that keeps a fixed width-to-height ratio while content fills it, for images, video and embeds. For an image with loading and error handling, put Image inside it.

<AspectRatio ratio={16 / 9} className="rounded-xl">
  <img src="/lake.jpg" alt="Mountain lake at sunset" />
</AspectRatio>

ratio is width divided by height and defaults to 16 / 9.
Direct children are absolutely positioned to fill the box, and a direct img is set to object-cover. Pass a single child.
It is full width by default; constrain the width with a parent or className.

Example source · show

import { AspectRatio } from './aspect-ratio'

const src = 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=800&q=70'

export const styles = {
  '16:9': () => (
    <div className="w-96"><AspectRatio ratio={16 / 9} className="rounded-xl bg-surface-sunken"><img src={src} alt="Mountain lake at sunset" /></AspectRatio></div>
  ),
  Square: () => (
    <div className="grid w-96 grid-cols-3 gap-2">
      {[0, 1, 2].map((i) => (
        <AspectRatio key={i} ratio={1} className="rounded-lg bg-surface-sunken"><img src={src} alt="" style={{ objectPosition: `${i * 50}% 50%` }} /></AspectRatio>
      ))}
    </div>
  ),
}

Source: packages/ui/src/aspect-ratio/aspect-ratio.tsx

Aspect Ratio

Preview: 16:9

Import

Props

<AspectRatio>

Usage notes

Catalog