Aspect

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.

Import


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

Props

Property	Type	Default	Description
`ratio`	`square, landscape, portrait, widescreen, ultrawide, golden`	`square`	The aspect ratio of the image.
`maxWidth`	`string`	`100%`	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.

Preview

Code

Ratio Golden

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

Preview

Code

Map

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

Preview

Code

Video

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

Preview

Code