AspectRatio
Container enforcing aspect ratio constraints with responsive behavior and overflow handling
Preset Aspect Ratios
Square (1:1)
Standard (4:3)
Widescreen (16:9)
Ultrawide (21:9)
Photo (3:2)
Portrait (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 1.5:1 Ratio
Custom "1.3:2.3"
Custom "5:7"
Custom "2.5:1"
Custom Numeric 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
Hover Detection
Click + Hover + Zoom
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
Related Components
View allCalendar date display with month/year navigation, date range selection, and locale support
Image/content slideshow with navigation controls, autoplay, infinite loop, and swipe gestures
Video player with controls, playback speed, volume, fullscreen, and subtitle support
Interactive image cropping tool with aspect ratio locking, zoom controls, rotation, and crop preview for profile or media uploads