Aspect
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.






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.


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.

Props
aria-describedby?
string;
aria-details?
string;
aria-label?
string;
aria-labelledby?
string;
aria-live?
"off" | "polite" | "assertive";
- '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;
id?
string;
maxWidth?
string;
100%
ratio?
"square" | "landscape" | "portrait" | "widescreen" | "ultrawide" | "golden";
"square"
role?
"region" | (string & {});
region
is used as a role, an aria-label
or aria-labelledby
must be provided.
See MDN.