Make an element's width relative to its height?

Question

I know that it's possible to specify an element's height relative to its width, because percentage margin and padding values are calculated relative to its width. Is it possible to do the opposite - width relative to height?

Answer 1

I found one way to do this without Javascript. Make an image with the ratio, and embed it into the HTML, scaling it accordingly, so that the parent element can inline-block fit to the image size.

<!-- height of the outer container -->
<div style="height: 200px">

    <!-- this will resize to 200px and maintain its aspect ratio --->
    <div style="display: inline-block; position: relative;">
        <img src="aspectratio.png" style="height: 100%; width: auto;" />
        <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
            <!-- Everything in here can party on the fact that their parent
                 has the correct aspect ratio -->
        </div>
    </div>

</div>