AspectRatio

Display images, videos, maps and other media with a consistent width/height ratio.

Import

ts
import { AspectRatio } from "@hope-ui/core";

ts
import { AspectRatio } from "@hope-ui/core";

Usage

Use the ratio prop to define a consistent width/height ratio.

tsx
<AspectRatio ratio={9 / 16} w="full" maxW="200px">
  <Image src="https://bit.ly/3TJwRZR" alt="Monkey D. Luffy" objectFit="cover" />
</AspectRatio>

tsx
<AspectRatio ratio={9 / 16} w="full" maxW="200px">
  <Image src="https://bit.ly/3TJwRZR" alt="Monkey D. Luffy" objectFit="cover" />
</AspectRatio>

Embed a video

tsx
// This video will have equal sides
<AspectRatio ratio={1} w="full" maxW="560px">
  <iframe
    title="one piece opening 1"
    src="https://www.youtube.com/embed/HRaoYuRKBaA"
    allowfullscreen
  />
</AspectRatio>

tsx
// This video will have equal sides
<AspectRatio ratio={1} w="full" maxW="560px">
  <iframe
    title="one piece opening 1"
    src="https://www.youtube.com/embed/HRaoYuRKBaA"
    allowfullscreen
  />
</AspectRatio>

Embed a map

tsx
<AspectRatio ratio={16 / 9} w="full">
  <iframe title="Yosemite National Park" src="https://bit.ly/3KKbOm9" />
</AspectRatio>

tsx
<AspectRatio ratio={16 / 9} w="full">
  <iframe title="Yosemite National Park" src="https://bit.ly/3KKbOm9" />
</AspectRatio>

Props