When attempting to size an element's width based on its height, I discovered what seemed like a clever solution using the transparent img trick:
The pink div displays correctly at a 1:2 ratio, but it fails to resize when the viewport changes (as it is set to have a height of 100% relative to a 100vh element).
Upon resizing the viewport, the img element widens as the viewport height increases. However, the container element does not adjust its width accordingly to accommodate this change. This behavior goes against the expected rules for displaying elements with display: inline-block. If you toggle the display style of .container in Chrome Console, it will properly resize to fit its child contents. It seems that the issue lies in how Chrome calculates dimensions from parent to child elements, causing it to not recalculate parent dimensions when the img element size changes. Is there a way to force Chrome to do this recalculation?