UI Toolkit - Set an element's height to match the calculated width

Is it possible, preferably in USS, to have an element’s height always match the calculated width?

For example, the element can grow horizontally via flex-grow, but I want the height to always match the final calculated width.

CSS has aspect-ratio:

aspect-ratio - CSS: Cascading Style Sheets | MDN

USS does not have this though unfortunately.

Aspect Ratio would be the best for performance and flexibility reason, and we are not exposing it at the moment.

The workaround would be to use a GemetryChangeEvent to read the resolved width and set that as the height. Of course you would need to disable anything that would affect that value: align-self !=stretch, no min and max size.

It will causes a new cycle of styling and layout, so it is not optimal, but in most use cases I had the opportunity to benchmark it was not a limiting factor.

Let me know if you have any question

Thanks for the reply, yeah I just ended up hooking up to the GeometryChangedEvent and set the style.height to resolvedStyle.width and it seems to work.

Are there plans to add the aspect-ratio property in the future?

We have been prioritizing stability and a few big features for a while now, and aspect-ratio could have affected the stability. I am not at liberty of giving estimates but we see it is something valuable.

Well, that’s good to hear. Thanks for the insight and I look forward to seeing UI Toolkit maturing.