How can I make an element as wide as it is high in css?

Question

I know I can make an element as high as it is wide using padding-top/bottom

#element {
  width: 40%;
  padding-top: 40%;
}

The reason the above works is because, when giving padding-top/bottom a percentage value, it is relative to the width of the parent, not the height.

how can i do the same thing, just making it as wide as it is high instead of the other way around?

It needs to be responsive, and the solution should work in all major browser including IE8+

Answer 1

Well, I found a unique hack, though it's only a half-answer (it might answer certain cases). Maybe someone with a few more wits can extend it and find a full solution. :-)

Based on the fact that <img> tags retain their proportion when scaling only one dimension, I put together a test that embeds a 1x1 spacer, and scales it to fit the height.

It does work well. Sadly, the downside is the image needs to be contained in an element which is a sibling to the content generating the height, and the width of the actual element with the content does not change.

Thus, if you're able to duplicate your content, it might actually work.

Here's a JSFiddle to demonstrate it. And, here's the commented code:

<style type="text/css">
    #outer {
        position:relative; /* limit the absolutely positioned #box */
    }
    #box {
        background-color:red;
        position:absolute;
        height:100%; /* make this box fill the height of #outer */
        display:block;
        z-index:-1; /* put it behind the content box generating height (maybe not if you want to hide / copy it) */
    }
    img {
        height:100%; /* generate the proportional square */
    }
    #inner {
        position:absolute;
        top:0; bottom:0; left:0; right:0; /* make the inner box just fill the box generated by the image */
    }
    .centered {
        text-align:center;
        margin-top:50%;
        transform:translateY(-50%); /* quick vertical-centering css */
    }
    #box-text {
        color:white;
    }
    #height-box {
        display:inline-block; /* make the box width fit to the content - not vital either way */
    }
</style>
<div id="outer">
    <div id="box">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
        <div id="inner">
            <p id="box-text" class="centered">Box</p>
        </div>
    </div>
    <div id="height-box" contenteditable="true">is<br>this<br>actually<br>possible?</div>
</div>