The aspect-ratio property maintains proportions without padding hacks. Here's how to use it.
Basic Syntax
Loading code block...
Responsive Images
Loading code block...
Video Embeds
Loading code block...
Card Layouts
Loading code block...
Skeleton Loading
Loading code block...
Grid with Aspect Ratio
Loading code block...
Hero Sections
Loading code block...
Intrinsic Sizing
Loading code block...
Override with Content
Loading code block...
Replaced Elements
Loading code block...
Fallback for Older Browsers
Loading code block...
Best Practices
Usage:
✓ Use for responsive media
✓ Combine with object-fit
✓ Set on container, not content
✓ Use meaningful ratios
Responsive:
✓ Adjust ratio at breakpoints
✓ Set min/max constraints
✓ Test at various sizes
✓ Consider content overflow
Performance:
✓ Prevents layout shift
✓ Improves CLS score
✓ Set explicit dimensions
✓ Use with loading="lazy"
Avoid:
✗ Forcing ratio on text content
✗ Forgetting object-fit
✗ Ignoring browser support
✗ Breaking content accessibility
Conclusion
The aspect-ratio property simplifies responsive media handling without padding hacks. Use it for images, videos, cards, and any element needing consistent proportions. Combine with object-fit and constraints for flexible, responsive layouts that prevent layout shift.