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.