Div with 100% height and a particular aspect ratio - html

Question

How can I have a div with 100% height that has a particular aspect ratio, e.g. 2:3?
For example, if the outer element has a height of 900px, the width of the inner element should be 600px, but this should be responsive.
I don't want to use any JavaScript for this.
Using the CSS3 flexible box model would be fine.

Answer 1

If you are targeting modern browsers that support CSS3, you can try the following.
Consider the following HTML snippet:
<div class="wrapper">
<div class="inner">Inner content...</div>
</div>
and apply the following CSS rules:
html, body {
height: 100%;
}
body {
margin: 0;
}
.wrapper {
background-color: lightblue;
height: 100%;
}
.wrapper .inner {
margin: 0 auto;
background-color: beige;
height: 100%;
width: 66.6666666666vh;
}
The .wrapper element takes up 100% of the view port height because I have set
height: 100% on the body and html elements.
The inner wrapper .inner has a height: 100% and fills up the parent block.
To set the .inner width, use the viewport-percentage length vh that scales with the height of the parent block.
In this example, 66.66vh means 66.66% of the vertical height, which corresponds to a 2:3 aspect ratio (width:height).
See demo at jsFiddle
Reference: http://www.w3.org/TR/css3-values/#viewport-relative-lengths
Browser Compatibility
The vh unit and other vertical percentage lengths have pretty good support with the latest browsers, see the reference below for more details.
See reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/length#Browser_compatibility
Alternative Approach Using a Spacer Image
Consider the following HTML:
<div class="ratio-wrapper">
<img class="spacer" src="http://placehold.it/20x30">
<div class="content">Some content...</div>
</div>
and apply the following CSS:
.ratio-wrapper {
position: relative;
display: inline-block;
border: 1px solid gray;
height: 500px; /* set the height or inherit from the parent container */
}
.ratio-wrapper .spacer {
height: 100%; /* set height: 100% for portrait style content */
visibility: hidden;
vertical-align: top;
}
.ratio-wrapper .content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 20px;
}
The .ratio-wrapper container has two child elements, an img.spacer and div.content.
The image as a portrait aspect ratio, for example, 20x30 (wxh) and is set to expand to fill the height of the parent container using height: 100%. The image is hidden from view but retains its space in the parent block.
The .content element is positioned absolutely to fill the parent container and can contain any content. Because .content is constrained in height and width, the content could overflow in some cases, so setting overflow: auto may be appropriate.
See demo at: http://jsfiddle.net/audetwebdesign/BVkuW/
Related question and answer:
In Fluid Container, Can I Make Elements as Tall as they Are Wide?

Answer 2

You can do this by sticking a 2px by 3px image and an inner div as siblings into an outer div which has display: inline-block; applied. Now when you set the image to have a height of 100%, and you absolutely position the inner div to be as high and wide as its ancestor, you can set the height of the outer div, and the width of all elements involved will be exactly equal and based on the aspect ratio of the image.
Here's a jsFiddle demonstrating this approach.
HTML
<div>
<div>2 by 3</div>
<img src=".../twobythree.png" />
</div>
CSS
body > div {
height: 300px;
position: relative;
display: inline-block;
}
img {
display: block;
height: 100%;
}
div > div {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}