Aspect

Component to set responsive images, videos, maps

The <Aspect> layout component dynamically modifies the height of an element based on its current width to match a width-to-height ratio. For example, a 4:3 ratio would make an element with a width of 400px have a height of 300px. This updates in real time when you resize the screen.

Usage

Import

To import the component you just have to use this code below.

import { Aspect } from '@marigold/components';

Props

PropertyTypeDefaultDescription
ratiosquare, landscape, portrait, widescreen, ultrawide, goldensquareThe aspect ratio of the image.
maxWidthstring100%The maximum width of the image.

Examples

Ratio Square and maximum width

The example shows how the ratio and the maxWidth props with a image component inside is to use. The ratio has his default value square.

event_image

Ratio Golden

An Example that shows the ratio prop set to "golden".

event_image

Map

This Example use a Iframe inside the Aspect Component. The ratio prop is set to "landscape".

Video

An <Iframe> with a video inside the Aspect Component. The ratio prop is set to "widescreen".