Aspect Ratio

The aspect-ratio property provides a native way to maintain proportional dimensions without the infamous padding-top percentage hack.

The Old Way

/* The padding-top hack */
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 ratio = 9/16 = 0.5625 */
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 4:3 ratio */
.video-4-3 {
  padding-top: 75%; /* 3/4 = 0.75 */
}

/* 1:1 ratio */
.square {
  padding-top: 100%;
}

/* Different ratios require mental math */
.video-21-9 {
  padding-top: 42.857%; /* 9/21 = 0.42857 */
}

Problems:

• Unintuitive padding-top calculations
• Requires wrapper element
• Absolute positioning for content
• Height set to 0 is confusing
• Hard to understand and maintain
• Content must be positioned absolutely

The Modern Way

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.video-container iframe,
.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Other ratios - self-documenting */
.square {
  aspect-ratio: 1; /* or 1 / 1 */
}

.portrait {
  aspect-ratio: 3 / 4;
}

.ultrawide {
  aspect-ratio: 21 / 9;
}

Benefits:

• Self-documenting ratio values
• No wrapper elements needed
• No absolute positioning required
• No mental math
• Works with intrinsic sizing
• Content flows naturally

Practical Examples

Responsive Images

.thumbnail {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}

.hero-image {
  aspect-ratio: 21 / 9;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* Profile pictures */
.avatar {
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

Card Layouts

.card-image {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}

/* Consistent card heights in a grid */
.product-card {
  display: flex;
  flex-direction: column;
}

.product-card img {
  aspect-ratio: 1;
  object-fit: contain;
  background: #f5f5f5;
}

Video Embeds

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

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

/* Vertical video (TikTok, Reels, Shorts) */
.vertical-video {
  aspect-ratio: 9 / 16;
  max-height: 80vh;
  width: auto;
}

Skeleton Loaders

.skeleton-image {
  aspect-ratio: 16 / 9;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-avatar {
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e0e0e0;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

Responsive Grids

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.gallery-item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

With Container Queries

.card-container {
  container-type: inline-size;
}

.card-image {
  aspect-ratio: 16 / 9;
}

@container (min-width: 400px) {
  .card-image {
    aspect-ratio: 21 / 9;
  }
}

Fallback with Min-Height

/* When content might exceed ratio */
.flexible-card {
  aspect-ratio: 4 / 3;
  min-height: min-content; /* Expand if content is taller */
}

/* Strict ratio - clip overflow */
.strict-ratio {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

Common Aspect Ratios

Ratio	Value	Use Case
1:1	1	Avatars, thumbnails, icons
4:3	4 / 3	Classic photos, older video
3:2	3 / 2	DSLR photos
16:9	16 / 9	HD video, YouTube
21:9	21 / 9	Ultrawide, cinema
9:16	9 / 16	Vertical video (Stories)
2:3	2 / 3	Portrait photos
3:4	3 / 4	Portrait, book covers

Browser Support

Supported in all modern browsers. See caniuse.com/mdn-css_properties_aspect-ratio.

Performance Considerations

• No performance overhead compared to padding hack
• Works well with object-fit and object-position
• Intrinsic sizing works naturally
• Layout calculations are straightforward for the browser

When to Use

Use aspect-ratio when:

• Embedding videos responsively
• Creating consistent image thumbnails
• Building skeleton loading states
• Maintaining proportions in responsive layouts
• Creating square or circular elements

Use object-fit together with aspect-ratio when:

• Image proportions don’t match the container
• You need to crop or contain images
• Handling user-uploaded images of varying dimensions