CSS aspect-ratio Property

The aspect-ratio property maintains element proportions without padding hacks. Here's how to use it.

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

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.

CSS aspect-ratio Property

Basic Usage#

With Images#

Responsive Patterns#

Grid Layouts#

Video Embeds#

Card Components#

Skeleton Loaders#

With Flexbox#

Min/Max Constraints#

Intrinsic Sizing#

Replaced Elements#

Browser Support Fallback#

CSS Variables#

Best Practices#

Conclusion#

Share this article

Related articles

CSS Aspect Ratio Guide

CSS Grid Layout Patterns

CSS Flexbox Layout Patterns