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 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 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 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).
Maintain Aspect ratio for width @ 100%
Remove the height
from the image and give your container height: auto;
. Check the snippet.
div{ width: 1000px; height: auto; background: black;}
img { width: 100%;}
<div> <img src="https://dummyimage.com/500x250/918c91/0011ff.jpg" /></div>
Related Topics
How to Write a CSS Hack For Ie 11
Common CSS Media Queries Break Points
What Does Auto Do in Margin: 0 Auto
How to Get a Bootstrap Column to Span Multiple Rows
How to Make Child Element Higher Z-Index Than Parent
Why Does 'Overflow:Hidden' Prevent 'Position:Sticky' from Working
Does CSS Have a :Blur Selector (Pseudo-Class)
Flushing Footer to Bottom of the Page, Twitter Bootstrap
Hover Effect: Expand Bottom Border
Css Media Query to Target Only iOS Devices
Css: Hover One Element, Effect For Multiple Elements
Style ≪Select≫ Element Based on Selected ≪Option≫
Css Transparent Curved Shape With Two Rounded Sides
Why Doesn't This A:Visited CSS Style Work
What Is the Best CSS Framework and Are They Worth the Effort