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 possib

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>