Keep div height relevant to aspect ratio
I did find an answer to this. It adds a little bit of unsemantic markup, but works well.
Can find it here: http://jsfiddle.net/AdQ3P/
The logic is in the padding-bottom. basically this needs to be (img_height / img_width) * 100.
Edit Here's the code, so not dependent on jsfiddle.
<div class="container">
<div class="hero"></div>
</div>
.container {
width:100%;
max-width:500px;
}
.hero {
width:100%;
height:0;
background-size:100%;
background:url(http://img97.imageshack.us/img97/3410/photo2ue.jpg) no-repeat;
padding-bottom:75%;
}
Also that was one messy desk i had lol.
Maintain div aspect ratio according to height
You can use an image that has the desired proportions as to help with proportional sizing (images can be scaled proportionally by setting one dimension to some value and other to auto). The image does not have to be visible, but it must occupy space.
.box {
position: absolute;
bottom: 0;
left: 0;
height: 50%;
}
.size-helper {
display: block;
width: auto;
height: 100%;
}
.inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255, 255, 153, .8);
}
<div class="box">
<img class="size-helper" src="//dummyimage.com/200x100/999/000" width="200" height="100">
<div class="inner">
1. box has fluid height<br>
2. img has 2:1 aspect ratio, 100% height, auto width, static position<br>
2.1 it thus maintains width = 200% of height<br>
2.2 it defines the dimensions of the box<br>
3. inner expands as much as box
</div>
</div>
Maintain the aspect ratio of a div with CSS
Just create a wrapper <div>
with a percentage value for padding-bottom
, like this:
.demoWrapper {
padding: 10px;
background: white;
box-sizing: border-box;
resize: horizontal;
border: 1px dashed;
overflow: auto;
max-width: 100%;
height: calc(100vh - 16px);
}
div {
width: 100%;
padding-bottom: 75%;
background: gold; /** <-- For the demo **/
}
<div class="demoWrapper">
<div></div>
</div>
Maintain aspect ratio according to width and height
The aspect-ratio property (2022)
To maintain the aspect ratio of a div
according to width and height, you can use the aspect-ratio
property (MDN reference).
This allows you to maintain any aspect ratio according to the viewport size or to the size of the parent element.
Maintaining aspect-ratio according to the viewport size (width and height) :
.ar-1-1 {
aspect-ratio: 1 / 1;
background: orange;
}
.ar-1-19 {
aspect-ratio: 16 / 9;
background: pink;
}
div {
max-width: 100vw;
max-height: 100vh;
margin-bottom: 5vh;
}
/** For the demo **/
body {
margin: 0;
}
<div class="ar-1-1">Aspect ratio 1:1</div>
<div class="ar-1-19">Aspect ratio 1:19</div>
Maintain aspect ratio of a div according to height
As % padding/margin are calculated according to the width of the contrainer, you can't use the "padding technique" to maitain aspect ratio according to the height.
For a CSS solution, you will have to use vh
units :
vh : 1/100th of the height of the viewport.
Source
For browser support see canIuse
Example for a 1:1 aspect ratio :
DEMO
CSS
div{
width: 50vh;
height: 50vh;
}
Keep aspect ratio of div. while using max-width
You could apply the padding-bottom
to its ::before
pseudoelement, e.g.
.some-class {
width: 100%;
max-width: 520px;
border: 1px #9bc solid;
}
.some-class::before {
padding-bottom: 100%;
content: "";
display: inline-block;
vertical-align: top;
}
demo
Doing so the padding is always computed relatively to the actual width of the div and not to the width of its ancestor (e.g. the body
element)
Update (05/2021)
On recent browsers you could start using the new aspect-ratio
property, so if the browser supports it you could simply write
.some-class {
width: 100%;
max-width: 520px;
border: 1px #9bc solid;
aspect-ratio: 1;
}
Related Topics
How to Make a Gradient Background in CSS
Dividing Long List of <Li> Tags into Columns
Vertically Center Elements in CSS
Hover and Click on CSS Triangle
Text with Image Background in Svg or CSS
Align Material Icon with Text on Materialize
Absolute Position Affects Width
Vertically Center in Viewport Using CSS
Differencebetween P:Nth-Child(2) and P:Nth-Of-Type(2)
How to Unskew Background Image in Skewed Layer (Css)
Adding a Small Picture on the Right Side of Textfield with CSS
Font Sizes: Ems VS Pixels... in 2011, Which One Should Be Used
Attribute Selector Where Value Equals Either a or B
CSS Animation on "Content:" Doesn't Work on Safari and Firefox
Scroll Part of Content in Fixed Position Container
Bootstrap Carousel as Website Background
How to Use the Nth-Child Value as a Parameter in a Property? (And How)