Menu
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 } 
632
Top header with 100% width and 50px height. Left navigation bar with 200px width and dynamic height to fill the screen. A container on the right of the nav bar and under the header with dynamic width and height to fill the screen.
Height: When a rectangle is drawn with horizontal and vertical sides, the word height makes it clear which dimension is meant; height labels how high (how tall) the rectangle is. That makes it easy to indicate the other dimension—how wide the rectangle is from side to side—by using the word width.
To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically. The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.
[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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
