AspectRatio

Ensures your content maintains a specific aspect ratio regardless of its actual width or height.

Usage

The AspectRatio component is essential for responsive design, ensuring elements like images, videos, and other content fit perfectly while retaining their intended aspect ratio.

Basic AspectRatio

Wrap any content inside the AspectRatio component to maintain a specific ratio.

<AspectRatio ratio={4 / 3}>
  <Image src="https://images.unsplash.com/photo-1620120966883-d977b57a96ec" height="100%" alt="Basic AspectRatio" />
</AspectRatio>

API

Props