My question is very similar to this question: CSS: 100% width or height while keeping aspect ratio?
I have a div whose position is fixed. The width of the div must be 100% and its height exactly 1/6th of its width. Is there a -webkit-calc() way of doing this?
Note: JS solutions are not preferred as a zoom/orientation change can affect the width/height.
You can use Jquery's Equal Heights Plugin to accomplish, this plugins makes all the div of exact same height as other. If one of them grows and other will also grow. Usage: $(object). equalHeights([minHeight], [maxHeight]); Example 1: $(".
In order to maintain the aspect ratio of a div with CSS create flexible elements that keep their aspect ratio (4:3, 16:9, etc.) when resize the browser window. What is aspect ratio? The aspect ratio of an element describes the proportional relationship between its width and height.
This can be achieved by giving the element height:0 and padding-bottom:30% . In all browsers, when padding is specified in %, it's calculated relative to the parent element's width. This can be a very useful feature for Responsive Design.
Is this what you are after? I'm not using -webkit-calc()
at all. I've inserted a 1px
by 6px
image into a outer div
which has position: fixed
applied to it, and set the image to have a width
of 100%
and position: relative
. Then I have added an inner div
which is absolutely positioned to be as high and wide as its ancestor.
Now you can change the width of the outer div
, and the images' width: 100%
setting will ensure that both the outer and the inner div
's are guaranteed to always have a height equal to 1/6th of their width (or at least as close to exactly equal as it can get, the heights will be rounded off to the closest whole number of pixels). Any content could go inside the inner div
.
HTML
<div>
<div></div>
<img src="https://dl.dropboxusercontent.com/u/6928212/sixbyone.png" />
</div>
CSS
html, body {
margin: 0px;
padding: 0px;
}
div {
position: fixed;
width: 100%;
}
div > div {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
img {
width: 100%;
display: block;
position: relative;
}
Here's a jsFiddle showing the requested behaviour.
You can also use the solution I described in Responsive square columns.
It is based on the fact that % padding-top/bottom
and margin-top/bottom
are calculated according to the whidth of the parent element.
Adapted to your situation it would look like this :
FIDDLE
HTML :
<div class="wrap">
<div class="content">
</div>
</div>
CSS :
.wrap{
position:fixed;
width:100%;
padding-bottom:16.666%; /* 100x1/6 = 16.666...*/
}
.content{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
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