CSS aspect-ratio proposal

I wanted to propose aspect-ratio property for CSS, but it seems that @tabatkins already did it at the aspect-ratio CSS property blog post. However the blog does not mention what happened to this spec (and it is not in https://github.com/tabatkins/specs).

I think this feature would be very useful for things that do not have their own aspect ratio (those that do can use object-fit). Very basic use case: creating a square element within a container, where width/height of the container are not known in advance, or when element can be used in multiple different containers. This feels like HTML/CSS 101, yet it is hard – for width based aspect ratio you have to use weird hacks, and for height-based aspect ratio you are out of luck.

Since there is already a spec, my question is – is there something more that can be done to make this happen somewhere in the future? Or is there a replacement solution planned?

Tab has to add it to CSS Sizing so that we can start filing browser bugs for it

Very useful properties.

Somehow, I am just now discovering that this property exists.

I suggest intrinsic-width and intrinsic-height properties.

Has anything been done regarding aspect ratio? This has obviously been around for years, and could be very useful in many circumstances, especially for beginners.

A good way to get things rolling is to define a practical use case in detail. Then others can analyze it, and see if the proposed feature would indeed be the best approach, or if there exists a good solution with existing CSS.

How might one go about this? Github repo with some examples? I’d be open to putting together some practical uses of it, if it means the ball gets rolling on this. If I go through the trouble just want to make sure I go through it in the correct way to get the best exposure / feedback.

I find it very surprising that this property still doesn’t exist in CSS. The usefulness of it is immense - especially in responsive design - and I currently use the padding hack all over my projects to get the desired results. (https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css). Just the amount of activity in that issue alone should be enough to see the need for this property.

There are a few problems with this hack though: Firstly, because it’s based on padding, it’s a given that relative elements in the block will cause the block to grow instead of filling in the space created by our hack (this can only be solved with absolute positioning an inner element). Secondly, there are cases where the behaviour is not consistent (a child within a flexbox container for example, the flexbox spec seems to override it in some browsers). And lastly, in most instances it requires creating a whole bunch of extra wrapping containers (like in flexbox layouts to prevent the override) and the need to have absolute positioning for inner elements to get the desired result.

Modern web design more often than not forgoes the use of absolute units in order to keep things fluid. With the loss of absolute units, aspect ratio is often the only thing we have to go by to create consistent layouts and prevent layout reflow.

The most important parts of CSS involves layout, and maintaining aspect ratio on a block is a major layout function.

Object-fit was mentioned earlier, but that is a completely different use case. It has nothing to do with actual element sizing - it’s simply how an image / video fits itself within an element (which has been sized according to other properties). Aspect-ratio and object-fit are a great hand-in-hand though. E.g. Have an element in your layout for a profile picture which maintains a certain aspect ratio, and have the image inside it use object-fit: cover, so that it always fills up the element even if its slightly wider or higher.

I didn’t notice before, but it already exists:

• Repo: https://github.com/WICG/aspect-ratio
• Spec: https://rawgit.com/WICG/aspect-ratio/master/overview.html