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?

score 9 · Answer 1 · answered Jun 05 '12 at 06:21

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>

is it possible to crop the img and thereby produce an arbitrary aspect ratio? — mulllhausen, May 05 '13 at 09:37
@mulllhausen you could use a http://placekitten.com/ image with `visibility: hidden`. — Brilliand, Mar 14 '14 at 15:46

Make an element's width relative to its height?

1 Answers1

Linked