Components/Layout/AspectRatio

AspectRatio

Layout

Maintains a fixed aspect ratio for any child content.

Uses the padding-bottom technique to lock an element to a given ratio. Default is 16/9. Children are absolutely positioned to fill the container.

Usage

import { AspectRatio } from "nosible-ux"

export default function Example() {
  return (
    <AspectRatio ratio={16 / 9}>
      <img src="/chart.png" alt="Signal trend chart" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
    </AspectRatio>
  )
}

Examples

Square thumbnail

Props

Name	Type	Default	Description
`ratio`	`number \| undefined`	—	The ratio of width to height (e.g. 16/9, 4/3, 1). Default: 16/9.

← All Components Getting Started →