Aspect Ratio
Aspect ratio components maintain a consistent width-to-height ratio for media and other elements, ensuring they display correctly across different screen sizes and resolutions.
Overview
The Aspect Ratio component allows designers and developers to apply predefined aspect ratios to containers, images, videos, and other media elements, ensuring a consistent and visually appealing presentation.
When to use
Apply the Aspect Ratio component when you need to maintain consistent proportions for media elements.
Use aspect ratios in responsive designs to ensure that media and containers scale proportionately.
When using this component, ensure content within the aspect ratio is fully visible and not clipped or distorted.
When not to use
Avoid using a fixed aspect ratio for content that requires flexibility in size or shape, such as text-heavy containers.
Avoid applying aspect ratios that may lead to awkward or cramped layouts, especially in responsive designs.
This is only a container element and should not be used without embedded content (image, video etc.)
Anatomy
Accessibility
Content Visibility: Ensure that the Aspect Ratio component does not obscure or clip essential content.
Support for Visual Hierarchy: Use aspect ratios that support clear visual hierarchy, making it easy for users to navigate and understand content.
Support for Assistive Technologies: Ensure that all content within the aspect ratio remains navigable and accessible to users relying on these tools.
Example
1:1
Profile pictures, social media avatars
1:2
Tall and narrow banners, split screens
2:1
Hero images, wide banners
2:3
Portrait images, mobile cards
3:2
Landscape images, product thumbnails
3:4
Article images, inline photos in blogs
4:3
Standard images in content-heavy websites
4:5
Portrait-oriented product images, feature cards
5:4
Close to a perfect square, app icons
9:16
Vertical videos or stories
9:21
Extra tall vertical layouts, mobile first views
10:16
Detailed infographics, complex app interfaces
16:9
Embedded videos, featured content blogs
16:10
Slightly taller than wide screen
21:9
Ultra-wide displays, cinematic video
Golden Ratio_Landscape (1.618:1)
Landing pages with balanced and aesthetic layouts
Golden Ratio_Portrait (1:1.618)
Portrait-oriented screens, e-book readers
Last updated