CSS aspect-ratio: Maintain Shape in Responsive Layouts
The aspect-ratio property sets a box's width-to-height ratio, making it maintain its shape as its container resizes. It's ideal for responsive video embeds or uniform grid items. The footgun: it has no effect if both width and height are fixed values.
Why it exists
Before aspect-ratio, creating an element that maintained its proportions while resizing (like a video embed) required CSS tricks like the "padding-top hack." This involved a container with zero height and a percentage-based padding to simulate the ratio. The aspect-ratio property provides a direct, declarative way to solve this common responsive design problem.
The mental model
Think of aspect-ratio as giving an element a "shape rule" to follow. You tell a box, "Always try to be a 16:9 rectangle." If you then set its width to 100% of its parent, the browser will automatically calculate the correct height to maintain that 16:9 shape. It locks the proportions, not the dimensions.
How it works
You provide a ratio, like 16 / 9 or a single number like 1 (for a square). For this property to have an effect, one of the element's dimensions (width or height) must be set to auto or not set at all. The browser then uses the aspect ratio to calculate the size of that auto dimension based on the other, determined dimension. For example, if width is 500px and aspect-ratio is 2 / 1, the browser will calculate the height to be 250px.
When to use it
Use aspect-ratio for any block-level element that needs to maintain its proportions. This is common for video embeds, images (especially as placeholders before they load), responsive iframes, and UI components like cards in a grid that need a uniform shape. It simplifies creating visually consistent layouts, especially for media content.
When not to use it
Don't use aspect-ratio when an element's height should be determined by its content, like a paragraph of text or a container wrapping a variable number of items. Also, it has no effect on inline elements or if you have explicitly set both width and height with fixed values (e.g., in pixels), as there is no auto dimension for the browser to calculate.
One canonical example
To create a responsive video container that always maintains a 16:9 widescreen ratio, you would apply aspect-ratio: 16 / 9; to a container div. Then, you'd set the <iframe> or <video> element inside it to have width: 100%; and height: 100%;. As the container's width changes with the viewport, its height will automatically adjust to preserve the 16:9 ratio, and the video inside will fill it perfectly.
Interview question
What is a key condition that prevents the `aspect-ratio` property from having any effect on an element?
- a.Both the element's "width" and "height" are explicitly defined with fixed values.Correct
- b.The element's height is determined by its content.
- c.The element's display property is set to "block".
- d.The element is a media element like an image or video.
Why? this is the answer
The card states that `aspect-ratio` has no effect if both width and height are explicitly set with fixed values, as there is no `auto` dimension for the browser to calculate. While it's not recommended when height is content-driven (Option B), that doesn't inherently prevent the property from attempting to apply.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles