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.