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>
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;
}
How to make div element auto-resize maintaining aspect ratio?
The aspect-ratio
ref property has a good support now so you can use the below:
body {
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: gray;
}
.stage {
--r: 960 / 540;
aspect-ratio: var(--r);
width:min(90%, min(960px, 90vh*(var(--r))));
display: flex;
justify-content: center;
align-items: center;
background:
/* this gradient is a proof that the ratio is maintained since the angle is fixed */
linear-gradient(30deg,red 50%,transparent 50%),
chocolate;
}
<div class="stage">
<p>Some text</p>
</div>
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>
CSS force image resize and keep aspect ratio
img { display: block; max-width:230px; max-height:95px; width: auto; height: auto;}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p><img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
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>
Related Topics
How to Put Two Button in the Same Line Using Only HTML and CSS
How to Toggle Mat-Expansion-Panel With Button Click
Best Way to Create Video from Html5 Animation
Large File Upload Though HTML Form (More Than 2 Gb)
Bootstrap Accordion Issue With Arrow
How to Automatically Set Text Box to Uppercase
Html5 Input Type Date Format to Mm/Dd/Yyyy Causing Issue in Chrome
First Name Validation Using HTML 5 Pattern
Html Wont Link to CSS File in Visual Studio Code
Change Default Text in Input Type="File"
How to Put CSS @Media Rules Inline
Fixed Headers on Scroll Inst Working Correctly in Angular Application
How to Get an Iframe to Be Responsive in iOS Safari
Displaying Comma Separated String in Angular 6
How to Modify the Primeng P-Calendar Style