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 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;
}
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 of a div with dynamic height
Here is one other solution:
We can make an inner div inside the main .square
div inherits its parent height.
Then, if we rotate that inner div, its height now becomes its width. So all we've got to do at this point, is to hide the overflow from the parent div, and apply some translation so it ends at the correct position.
#container {
width: 400px;
padding: 20px;
border: solid 1px black;
position: relative;
}
.square {
position: absolute;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
pointer-events: none;
}
.square>div {
background-color: red;
transform: rotate(-90deg) translate(100%, 0%);
width: 100vw;
height: 100%;
transform-origin: 100% 100%;
}
<div id="container">
<div class="content">
<textarea> I'm a dynamic content</textarea>
</div>
<div class="square">
<div></div>
</div>
</div>
Maintain aspect ratio of div but fill screen width and height in CSS?
There is now a new CSS property specified to address this: object-fit
.
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
The feature is widely supported by now (http://caniuse.com/#feat=object-fit).
Div that fits into parent and maintains an aspect ratio
Ok, it looks like it can't be solved by CSS only. If anyone interested, I've put together a React component that does the job (Tests and better README soon, when I have time).
It wraps its children into a div
and uses JavaScript to compute the width and height of that div in order to accommodate the available space while maintains the given aspect ratio. It basically stretches the wrapper until one of the sides reaches its maximum.
BREAKING UPDATE a CSS only solution has been found!
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
Css3Pie in MVC, Where to Place the Pie.Htc File
Jqgrid Zebra/Alt Rows Background Not Working Due to UI Theme Class
Glyphicons Rendering as Empty Box
How Add Class to Parent in Angular Application
How to Create a Concave Bottom Border in CSS
What's the Difference Between CSS3 Translate Method and CSS2 Relative Positioning
Center Overflowing Div Inside Smaller Div
How to Customize the Browse Button
Custom List Style for Ordered Lists
Differencebetween the Selectors ".Class.Class" and ".Class .Class"
Google Chrome, Flash and Z-Index Wrong Behaviour
Bootstrap: Center Some Navbar Items
Is It Allowed to Use Any Decimal Value in CSS Keyframe Animations
How to Create Custom Tooltips with CSS Pseudoelements
Hyperlinks Showing Url with Blueprint
Why Is a Pseudo-Class So Called