Hack Frontend Community

CSS Aspect-ratio

aspect-ratio is a CSS property that allows you to set the aspect ratio of an element, automatically calculating one of the dimensions based on the other. This is especially useful for creating responsive images, videos, and containers.

What is aspect-ratio?

aspect-ratio defines the preferred ratio of width to height of an element. The browser automatically calculates one of the dimensions if the other is set.

Syntax

.element {
  aspect-ratio: 16 / 9;  /* width / height */
  aspect-ratio: 1 / 1;    /* square */
  aspect-ratio: 4 / 3;    /* classic ratio */
  aspect-ratio: auto;     /* default */
}

Basic Usage

Simple Example

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

Result: Container will always have a 16:9 aspect ratio, regardless of screen width.

With Images

.image-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
RatioCSS ValueUsage
1:1aspect-ratio: 1 / 1Square images, avatars
4:3aspect-ratio: 4 / 3Classic photos, old monitors
16:9aspect-ratio: 16 / 9Videos, modern screens
21:9aspect-ratio: 21 / 9Ultrawide screens, cinematic format
3:2aspect-ratio: 3 / 2Photos, printing

Practical Examples

Responsive Video

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

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
}

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

Product Cards

<div class="product-grid">
  <div class="product-card">
    <div class="product-image">
      <img src="product.jpg" alt="Product">
    </div>
    <div class="product-info">
      <h3>Product Name</h3>
      <p>Price: $100</p>
    </div>
  </div>
</div>

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f0f0f0;
}

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

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

.gallery-item {
  width: 100%;
  aspect-ratio: 4 / 3;
  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.1);
}

Combining with Other Properties

With max-width and min-width

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

With padding for spacing

.content-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 1rem;
  box-sizing: border-box;
}

With Grid and Flexbox

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.grid-item {
  aspect-ratio: 1 / 1;
  background: #f0f0f0;
}

Overriding aspect-ratio

If both width and height are set, aspect-ratio may be overridden:

.element {
  width: 300px;
  height: 200px;
  aspect-ratio: 1 / 1; /* ignored, as both sizes are set */
}

For aspect-ratio to work, you need to set only one dimension:

.element {
  width: 300px;
  /* height not set */
  aspect-ratio: 1 / 1; /* height will be 300px */
}

Fallback for Old Browsers

For browsers that don't support aspect-ratio, you can use the padding trick:

.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 = 9/16 * 100% */
}

.aspect-ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Modern approach */
@supports (aspect-ratio: 1) {
  .aspect-ratio-box {
    padding-bottom: 0;
    aspect-ratio: 16 / 9;
  }
}

Using with Variables

:root {
  --video-ratio: 16 / 9;
  --image-ratio: 4 / 3;
}

.video {
  aspect-ratio: var(--video-ratio);
}

.image {
  aspect-ratio: var(--image-ratio);
}

Browser Support

aspect-ratio is supported in:

  • Chrome 88+
  • Firefox 89+
  • Safari 15+
  • Edge 88+

For older browsers, use the padding trick or polyfill.

Advantages of aspect-ratio

  1. Simplicity: No need to calculate height manually
  2. Responsiveness: Automatically adapts to width
  3. Clean code: Less CSS, more semantics
  4. Performance: Browser optimizes calculations

Tip:

Use aspect-ratio to create responsive containers, especially for images and videos. This is a modern and elegant way to control aspect ratios without needing to set fixed sizes.