aspect-ratio

The aspect-ratio property maintains a specific width-to-height ratio for an element. This is useful for videos, images, and containers that need to maintain proportions when resizing.

Aspect Ratio Syntax

CSS

/* Square (1:1) */
.square {
  aspect-ratio: 1;
  width: 100%;
}

/* Landscape (16:9) */
.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Portrait (9:16) */
.mobile {
  aspect-ratio: 9 / 16;
  width: 100%;
}

/* Custom ratio */
.custom {
  aspect-ratio: 4 / 3;
  width: 100%;
}

Common Patterns

CSS

/* Video embed */
.video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
}

/* Image container */
.image-container {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card grid */
.card {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

Note

aspect-ratio maintains proportions as width changes. Useful for responsive images, videos, and grid items.

Block vs inline elements: [Block vs Inline vs Inline-Block](/css/block-vs-inline).