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
}
This question is related to
javascript
jquery
html
css
responsive-design
Using jQuery you can achieve this by doing
var cw = $('.child').width();
$('.child').css({'height':cw+'px'});
[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! */
}
_x000D_
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>
_x000D_
Expanding upon the padding top/bottom technique, it is possible to use a pseudo element to set the height of the element. Use float and negative margins to remove the pseudo element from the flow and view.
This allows you to place content inside the box without using an extra div and/or CSS positioning.
.fixed-ar::before {_x000D_
content: "";_x000D_
float: left;_x000D_
width: 1px;_x000D_
margin-left: -1px;_x000D_
}_x000D_
.fixed-ar::after {_x000D_
content: "";_x000D_
display: table;_x000D_
clear: both;_x000D_
}_x000D_
_x000D_
_x000D_
/* proportions */_x000D_
_x000D_
.fixed-ar-1-1::before {_x000D_
padding-top: 100%;_x000D_
}_x000D_
.fixed-ar-4-3::before {_x000D_
padding-top: 75%;_x000D_
}_x000D_
.fixed-ar-16-9::before {_x000D_
padding-top: 56.25%;_x000D_
}_x000D_
_x000D_
_x000D_
/* demo */_x000D_
_x000D_
.fixed-ar {_x000D_
margin: 1em 0;_x000D_
max-width: 400px;_x000D_
background: #EEE url(https://lorempixel.com/800/450/food/5/) center no-repeat;_x000D_
background-size: contain;_x000D_
}
_x000D_
<div class="fixed-ar fixed-ar-1-1">1:1 Aspect Ratio</div>_x000D_
<div class="fixed-ar fixed-ar-4-3">4:3 Aspect Ratio</div>_x000D_
<div class="fixed-ar fixed-ar-16-9">16:9 Aspect Ratio</div>
_x000D_
width: 80vmin; height: 80vmin;
CSS does 80% of the smallest view, height or width
HTML
<div id="container">
<div id="element">
some text
</div>
</div>
CSS
#container {
width: 50%; /* desired width */
}
#element {
height: 0;
padding-bottom: 100%;
}
Simple and neet : use vw
units for a responsive height/width according to the viewport width.
vw : 1/100th of the width of the viewport. (Source MDN)
HTML:
<div></div>
CSS for a 1:1 aspect ratio:
div{
width:80vw;
height:80vw; /* same as width */
}
Table to calculate height according to the desired aspect ratio and width of element.
aspect ratio | multiply width by
-----------------------------------
1:1 | 1
1:3 | 3
4:3 | 0.75
16:9 | 0.5625
This technique allows you to :
position:absolute;
These units are supported by IE9+ see canIuse for more info
It is possible without any Javascript :)
The HTML:
<div class='box'>
<div class='content'>Aspect ratio of 1:1</div>
</div>
The CSS:
.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;
}
/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
padding-top: 50%;
}
.ratio1_2:before{
padding-top: 200%;
}
.ratio4_3:before{
padding-top: 75%;
}
.ratio16_9:before{
padding-top: 56.25%;
}
There is a way using CSS!
If you set your width depending on the parent container you can set the height to 0 and set padding-bottom to the percentage which will be calculated depending on the current width:
.some_element {
position: relative;
width: 20%;
height: 0;
padding-bottom: 20%;
}
This works well in all major browsers.
really this belongs as a comment to Nathan's answer, but I'm not allowed to do that yet...
I wanted to maintain the aspect ratio, even if there is too much stuff to fit in the box. His example expands the height, changing the aspect ratio. I found adding
overflow: hidden;
overflow-x: auto;
overflow-y: auto;
to the .element helped. See http://jsfiddle.net/B8FU8/3111/
Source: Stackoverflow.com