Aspect Ratio

CAspectRatio component is used to embed responsive videos and maps, etc.


import { CAspectRatio } from '@chakra-ui/vue-next';


Embed Video

To embed a video with a specific aspect ratio, use a CBox as an iframe with src pointing to the link of the video.

Pass the max-width prop to CAspectRatio to control the width of the content.

<CAspectRatio max-w="600px" max-h="300px" :ratio="4 / 3">    <CBox as="iframe" w="600px" h="500px" title="Chakra UI Vue" src=""  allow-full-screen /></CAspectRatio>

Embed Image

You can also embed image that has a 4:3 aspect ratio.

sage mode naruto
<CAspectRatio max-w="400px" :ratio="4 / 3">    <CImage src="" alt="sage mode naruto" object-fit="cover" /></CAspectRatio>

Embed a responsive map

Here's how to embed a responsive Google map using CAspectRatio. To make the map take up the entire width, we can ignore the max-width prop.

Edit this page on GitHub