This totally misses the point. I can't run all those calculations while rendering a website. The browser needs to be intelligent enough to not dynamically jump around in the viewport when an element finished loading. Just fix the viewport and attach at the top and bottom.
And relative units don't fix this either as that information still misses the ratio of my image. If it's 100 vw, how high is it? I don't know this information without fetching the image, doing calculations and dynamically updating the DOM with that information.
That sounds like a problem that should be fixed in CSS. Ideally, it should be possible to specify that an image should have a width and/or max-width of 100vw, 100% of its parent, or whatever, taking box-sizing and paddings into account... and then specify that its height should be a certain percentage of its own width. The server already knows the aspect ratio, so it can deliver this information in a 'style' attribute.
I haven't been following the latest developments in CSS for a while, so maybe it's already possible to do this?
I do this in production a few places by setting a div with no content or only absolutely position content to have padding-bottom of the aspect ratio in %. That gets calculated from the width, so if the image is 4:3 my ratio is 75%; 200px wide becomes 150px tall as well. Then, I set the image as a background to the div or absolutely position it inside to fill the space, and it's responsive to the layout while also reserving space for itself.
And relative units don't fix this either as that information still misses the ratio of my image. If it's 100 vw, how high is it? I don't know this information without fetching the image, doing calculations and dynamically updating the DOM with that information.