AspectRatio
Media
Container enforcing aspect ratio constraints with responsive behavior and overflow handling
Preset Aspect Ratios
Square (1:1)
1:1
Standard (4:3)
4:3
Widescreen (16:9)
16:9
Ultrawide (21:9)
21:9
Photo (3:2)
3:2
Portrait (9:16)
9:16
Visual Variants (16:9)
Default
Bordered
Glass
Glass Strong
Gradient
Overlay Gradients
Bottom Overlay
Mountain Vista
Breathtaking views
Top Overlay
Alpine Heights
Snow-capped peaks
Custom Ratios
Use numeric or string-based custom ratios.
Custom 2.5:1 Ratio
Custom 2.5:1
Custom 1.5:1 Ratio
Custom 1.5:1
Custom "1.3:2.3"
1.3:2.3
Custom "5:7"
5:7
Custom "2.5:1"
2.5:1
Custom Numeric 2.5
2.5
Interactive Examples
Zoom on Hover
Default Zoom (1.1x)
Strong Zoom (1.5x)
Subtle Zoom (1.05x)
Callbacks (click & hover)
Click to Count
Click Me!
Hover Detection
Hover Me!
Click + Hover + Zoom
Interactive!
Usage Guidelines
When to Use
- Video embeds
- Image containers
- Responsive media
Accessibility
- Maintains image accessibility
- Alt text preserved
Performance
- Pure CSS implementation
- No JavaScript
Common Mistakes
- Wrong aspect ratio for content
- Not handling content overflow
Frequently Asked Questions
AspectRatio enforces consistent proportions like 16:9 or 1:1 for images and videos.
Yes, AspectRatio maintains proportions at any container size.