CSS aspect-ratio Property — Modern Intrinsic Sizing Without Padding Hacks

The CSS aspect-ratio property (supported in all modern browsers since 2021) creates boxes that maintain a width-to-height ratio without JavaScript or the old padding-top hack.

Calculate aspect ratios instantly with the Aspect Ratio Calculator.

Basic syntax

.video-container {
  aspect-ratio: 16 / 9;   /* 16:9 widescreen */
}

.square {
  aspect-ratio: 1;         /* 1/1 = square */
}

.portrait-card {
  aspect-ratio: 3 / 4;    /* Portrait (e.g. Instagram post) */
}

.photo-thumbnail {
  aspect-ratio: 4 / 3;    /* Classic photo format */
}

The aspect-ratio property sets a preferred ratio. If the element has both explicit width and height, both are respected and the ratio is ignored.

Replacing the padding-top hack

The old way to maintain aspect ratio required a hacky padding calculation:

/* ❌ Old: padding-top hack */
.video-wrapper {
  position: relative;
  padding-top: 56.25%;  /* 9/16 = 56.25% for 16:9 */
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* ✅ Modern: aspect-ratio property */
.video-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
}
.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

Images and media with object-fit

/* Maintain aspect ratio while filling a container */
.card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;       /* Fill without stretching */
  object-position: center; /* Crop from center */
}

.avatar {
  width: 48px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

/* Gallery grid with uniform thumbnails */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.gallery-item {
  aspect-ratio: 1;       /* Force square thumbnails */
  object-fit: cover;
  width: 100%;
}

Responsive video embeds

<div class="video-embed">
  <iframe
    src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"
    title="Video"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

.video-embed {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
}

.video-embed iframe {
  width: 100%;
  height: 100%;
}

aspect-ratio with auto for images

/* For <img> elements: aspect-ratio: auto uses the intrinsic ratio
   from the image's width/height attributes to prevent layout shift */
img {
  aspect-ratio: auto;  /* Use intrinsic ratio */
  width: 100%;
  height: auto;        /* Let height scale naturally */
}

/* Always set width and height attributes on <img> to avoid CLS: */
/* <img src="photo.jpg" width="800" height="600" alt="..."> */
/* Browser reserves space before image loads */

Combining aspect-ratio with min/max constraints

/* Maintain ratio but limit maximum height */
.hero-image {
  width: 100%;
  aspect-ratio: 21 / 9;   /* Ultrawide cinematic */
  max-height: 600px;      /* Cap height on large screens */
  object-fit: cover;
}

/* Minimum height even if content is short */
.card {
  aspect-ratio: 4 / 3;
  min-height: 200px;      /* Prevent collapse on small content */
}

Grid layout with consistent aspect ratios

/* Social media post grid (all squares) */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.posts-grid > * {
  aspect-ratio: 1;
  overflow: hidden;
}

.posts-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Browser support and fallback

/* aspect-ratio supported: Chrome 88+, Firefox 89+, Safari 15+, Edge 88+ */
/* For older browsers: */

.video-container {
  position: relative;
  
  /* Fallback for browsers without aspect-ratio support: */
  padding-top: 56.25%;
  height: 0;
}

/* Override fallback when aspect-ratio is supported: */
@supports (aspect-ratio: 16/9) {
  .video-container {
    padding-top: 0;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

Related tools

• Aspect Ratio Calculator — calculate aspect ratios
• CSS Grid Generator — build responsive grids
• Flexbox Generator — build flexible layouts