Aspect

Keep media elements at a certain apsect ratio.

The <Aspect> component keeps media elements like images or videos in their correct aspect ratio, preventing them from looking stretched or squished on different screens. It is particularly useful for creating responsive layouts where consistent media dimensions are important.

Usage

When using the <Aspect> component to maintain the aspect ratio of media elements, choose an appropriate predefined ratio to ensure a consistent and visually appealing layout. The available aspect ratios include:

  • square: For media that should have equal width and height.
  • landscape: Suitable for wider-than-tall elements, commonly used for photos and videos.
  • portrait: Ideal for media taller than they are wide, like profile pictures.
  • widescreen: Useful for standard video content with a 16:9 ratio.
  • ultrawide: Best for extra-wide content, such as panoramic media.
  • golden: Reflects the golden ratio, providing a balanced and aesthetically pleasing aspect.

Select a ratio based on the type of media and the context in which it is displayed to achieve the best visual effect.

an abstract marigold flower
an abstract marigold flower
an abstract marigold flower
an abstract marigold flower
an abstract marigold flower
an abstract marigold flower

Image

When using the <Aspect> component with the <Image> component, it's recommended to use the fit and position of the <Image>  component properties to achieve the best results. The fit option ensures that the image is properly resized to fill the aspect container without distortion, while the position option controls how the image is aligned within the container, allowing for better visual balance.

a field of marigold flowers and a bright blue sky
a field of marigold flowers and a bright blue sky

Iframe

When using the <Aspect> component with an <iframe>, it can help to maintain the aspect ratio of embedded content, such as videos or maps, ensuring they appear correctly across different screen sizes.

To get the best results, combine the aspect component with appropriate width and height settings on the iframe to avoid any stretching or scaling issues.

Max Width

Setting a max width is useful when you want to prevent a media element from growing too large, especially on wider screens. It helps maintain a balanced layout by ensuring the media stays within a reasonable size.

The max width can be controlled using the maxWidth prop, allowing you to easily set a limit that fits your layout needs.

an abstract marigold flower

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!
aria-describedby?
string;
Identifies the element (or elements) that describes the object.
aria-details?
string;
Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label?
string;
Defines a string value that labels the current element.
aria-labelledby?
string;
Identifies the element (or elements) that labels the current element.
aria-live?
"off" | "polite" | "assertive";
Indicates the level of importance for updates in the live region.
  • 'off': Updates are not announced unless focused.
  • 'polite': Updates are announced when the user is idle.
  • 'assertive': Updates are announced immediately, interrupting other announcements.
children?
ReactNode;
The children of the component.
id?
string;
The element's unique identifier. See MDN.
maxWidth?
string;
The maximum width of the image.
Defaults to:
100%
ratio?
"square" | "landscape" | "portrait" | "widescreen" | "ultrawide" | "golden";
Defaults to:
"square"
role?
"region" | (string & {});
Identifies the element a significant section of content for easier navigation. When region is used as a role, an aria-label or aria-labelledby must be provided. See MDN.
Last update: 2 months ago