The aspect-ratio property maintains element proportions without padding hacks. Here's how to use it.
Basic Usage
Loading code block...
With Images
Loading code block...
Responsive Patterns
Loading code block...
Grid Layouts
Loading code block...
Video Embeds
Loading code block...
Card Components
Loading code block...
Skeleton Loaders
Loading code block...
With Flexbox
Loading code block...
Min/Max Constraints
Loading code block...
Intrinsic Sizing
Loading code block...
Replaced Elements
Loading code block...
Browser Support Fallback
Loading code block...
CSS Variables
Loading code block...
Best Practices
Layout:
✓ Use for consistent image containers
✓ Combine with object-fit for images
✓ Set fallbacks for older browsers
✓ Consider content overflow
Performance:
✓ Prevents layout shift (CLS)
✓ Reserve space before loading
✓ Use with width/height attributes
✓ Avoid unnecessary reflows
Responsive:
✓ Change ratios at breakpoints
✓ Use container queries when appropriate
✓ Combine with clamp() for fluid sizing
✓ Test on various devices
Accessibility:
✓ Ensure content remains visible
✓ Don't hide overflow important content
✓ Test with zoom/text scaling
✓ Maintain readability
Conclusion
The aspect-ratio property simplifies responsive layouts by maintaining element proportions without padding hacks. Use it for images, videos, cards, and grids. Combine with object-fit for images and provide fallbacks for older browsers.