Set height to percent of width?

css

Solution

It can be done CSS only:

#sheet {
    position: relative;
    padding-top: 50%; /* Your percentage */
}
#sheet > img {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
}

DEMO

It works because if you use a percentage in `padding-top`, it is relative to width. Then, you can use padding instead of height, using `position: absolute` to children in order to have a 0px tall parent.

Problem

This is what I want to do: ``` #sheet { margin: 0 auto; width: 100%; position: relative; height: calc(width * 1.3181818181818181818181818181818); } ``` `#sheet` looks like this: ``` <div id="sheet"> <img src="sheet1.svg"/> </div> ``` The width of `#sheet` varies depending on the size of your browser. The height (presently) depends on the height of `sheet1.svg`. But I know the width to height ratio of `sheet1.svg`, and I would like to encode that in the CSS so that the `#sheet` div can be sized correctly before the SVG loads in. I need the div to be sized correctly, because I have some other code that depends on that... CSS3 adds the `calc()` method, but I don't think you can do calculations based on other properties....so how can I dot his?

Original source