How to make an element as wide as it is tall in css?

Question

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

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

The reason this works is because when assigning a padding-top / bottom value, the percentage value refers to the width of the parent element, not the height.

how can i do the same just by making it as wide as it is tall and not vice versa?

It should be responsive, and the solution should work in all major browsers, including IE8 +

Answer 1

You may need javascript using jquery, it should be something like:

 $('#element').css({ width: + $('#element').height() }) 

but it’s very rude, I didn’t even test it

Update works - see my script: fiddle above

or I think I could be a little careless if you prefer:

 var el=$('#element'); el.css({ width: + el.height() }); 

this

Answer 2

Well, I found a unique hack, although this is only a half-answer (it may answer some cases). Maybe someone who has some more wit can expand it and find a complete solution. :-)

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

It works well. Unfortunately, the disadvantage is that the image must be contained in an element that is related to the content generating the height, and the width of the actual element with the content does not change.

That way, if you can duplicate your content, this might work.

Here's a JSFiddle to demonstrate this. And, here is 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> 

Answer 3

From here :

 <div class='box'> <div class='content'>Aspect ratio of 1:1</div> </div> .box{ position: relative; width: 50%; /* desired width */ } .box:before{ content: ""; display: block; padding-top: 100%; /* initial ratio of 1:1*/ } .content{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; }