AspectRatio

Maintain responsive consistent width/height ratio
Import

Usage

AspectRatio allows to maintain consistent width/height ratio. It can be used to display images, maps, videos and other media.

Panda
import { AspectRatio, Image } from '@mantine/core';
function Demo() {
return (
<AspectRatio ratio={720 / 1080} maw={300} mx="auto">
<Image
src="https://images.unsplash.com/photo-1527118732049-c88155f2107c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80"
alt="Panda"
/>
</AspectRatio>
);
}

Map embed

import { AspectRatio } from '@mantine/core';
function Demo() {
return (
<AspectRatio ratio={16 / 9}>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3025.3063874233135!2d-74.04668908358428!3d40.68924937933441!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue%20of%20Liberty%20National%20Monument!5e0!3m2!1sen!2sru!4v1644262070010!5m2!1sen!2sru"
title="Google map"
frameBorder="0"
/>
</AspectRatio>
);
}

Video embed

import { AspectRatio } from '@mantine/core';
function Demo() {
return (
<AspectRatio ratio={16 / 9}>
<iframe
src="https://www.youtube.com/embed/Dorf8i6lCuk"
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>
</AspectRatio>
);
}

AspectRatio component props

NameTypeDescription
ratio *
number
Aspect ratio, e.g. 16 / 9, 4 / 3, 1920 / 1080