css aspect-ratio

CSS Aspect-Ratio — Control Element Dimensions

by

Want to keep images, videos, or divs perfectly proportional at any screen size? The CSS aspect-ratio property makes this super simple — no more padding hacks or extra wrappers. With aspect-ratio, you can set a width-to-height ratio and let the browser handle the rest. In this MiniCoursey quick guide, you’ll learn what aspect-ratio does, see common use cases, and pick up tips for creating responsive elements that stay in shape.

What is Aspect-Ratio?

The aspect-ratio property sets a preferred ratio of width to height for an element. For example, an aspect ratio of 16/9 means the element’s width will always be about 1.78 times its height — perfect for videos or wide images.


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

When you set only width or height, the other dimension is calculated automatically to keep the ratio.

Common Use Cases

  • Keep images proportional in grids.
  • Make responsive video iframes.
  • Design cards and placeholders with consistent shapes.

.card {
  aspect-ratio: 1 / 1; /* perfect square */
  width: 300px;
  background: #eee;
}

Combining with Object-Fit

Use aspect-ratio with object-fit for images or videos that need to fill a container without stretching awkwardly.


img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

💡 Pro Tip: Use aspect-ratio instead of old padding hacks — it’s cleaner and more reliable.

⚠️ Common Mistake: Remember, aspect-ratio only works when at least one dimension (width or height) is set or the element has content that gives it size.

FAQ

Q: Do I still need the old padding-bottom trick?
A: Not anymore! Modern browsers support aspect-ratio natively.

Q: Does it work on all elements?
A: Almost — block-level elements, images, and videos are the most common use cases.

Related Link

👉 Check out previous: CSS Calc() — Do Math in Your Styles

Where to Learn More

Try MDN’s Aspect-Ratio docs for practical examples. Experiment with images, cards, and iframes to see how easy responsive design becomes!

Conclusion

Congrats — you now know how to use aspect-ratio for consistent, clean layouts. Combine it with modern CSS to build responsive designs faster than ever.

✨ Bookmark MiniCoursey for more quick & free mini courses!

Leave a Comment