💠 Aspect Ratio
Displays content within a desired ratio.
Usage
The Aspect Ratio component is designed to display content within a specific width-to-height ratio, ensuring consistent presentation across different display sizes and devices.
It is particularly useful for embedding media such as images, videos, or iframes while maintaining their intrinsic proportions without distortion.
By locking the aspect ratio, the component ensures that the content scales responsively while adhering to the set ratio, providing a seamless viewing experience.
When to use
- For media content: Use the Aspect Ratio component when displaying images, videos, or other visual media that require a specific aspect ratio to preserve their composition.
- For embeds: Utilize it for embedded content such as maps, tweets, or videos from third-party services where maintaining the original aspect ratio is crucial.
- For responsive design: Employ the Aspect Ratio component in responsive layouts to maintain the aspect ratio of content as the viewport size changes.
- For design consistency: Apply it to create a uniform appearance for elements that benefit from a consistent shape, such as cards, tiles, or thumbnail galleries.
Avoid using the Aspect Ratio component for content that needs to dynamically fill the available space without a fixed ratio, or where the content's aspect ratio should change based on different criteria such as the orientation of the device.
Examples
Ratio 16/9
Ratio 4/3
Ratio 3/2
Useful links
Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager: