Is it possible to set same height as width (ratio 1:1)?
Example
+----------+
| body |
| 1:3 |
| |
| +------+ |
| | div | |
| | 1:1 | |
| +------+ |
| |
| |
| |
| |
| |
+----------+
CSS
div {
width: 80%;
height: same-as-width
}
[Update: Although I discovered this trick independently, I’ve since learned that Thierry Koblentz beat me to it. You can find his 2009 article on A List Apart. Credit where credit is due.]
I know this is an old question, but I encountered a similar problem that I did solve only with CSS. Here is my blog post that discusses the solution. Included in the post is a live example. Code is reposted below.
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%;
/* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver/* show me! */
}
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>