AspectRatio

AspectRatio renders a responsive container.

Import

import { AspectRatio } from "@prismane/core";

Usage

By default, AspectRatio uses the ratio of 1/1.

<AspectRatio ratio="16/9" w={560} bg="primary" />

Embed Video

<AspectRatio ratio="1/1">
  <iframe
    width="560"
    height="100%"
    src="https://www.youtube.com/embed/w0AOGeqOnFY"
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen
  />
</AspectRatio>

Embed Image

<AspectRatio w={560} ratio="1/1">
  <img
    src="https://memes.co.in/memes/update/uploads/2021/04/65efc04-1536x1536.jpg"
    alt="meme"
    objectFit="cover"
  />
</AspectRatio>

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- AspectRatio

Go BackAnimation

Up NextAutocompleteField