How can I scale a div to fit inside the browser view port but preserve the aspect ratio of the div. How can I do this using CSS and/or JQuery?
-
I provided the solution for this here: http://stackoverflow.com/questions/643500/html-ie-stretch-image-to-fit-preserve-aspect-ratio/19390489#19390489 – tommybananas Oct 15 '13 at 20:36
-
1Can you accept an answer below? Seems a shame some very good answers go unaccepted – gillytech Mar 20 '14 at 05:02
-
Not a single one of the answers to this question achieve the desired result. Preserving the aspect ratio is trivial but getting it to be the correct aspect ratio AND always fitted to or smaller than the viewable area in both directions is more tricky. – atomless May 06 '15 at 16:01
-
Top answer here (from Danield) is the best solution : http://stackoverflow.com/questions/20590239/maintain-aspect-ratio-of-div-but-fill-screen-width-and-height-in-css – atomless May 06 '15 at 16:58
6 Answers
You don't need javascript for this. You can use pure CSS.
A padding-top percentage is interpreted relative to the containing block width. Combine it with position: absolute on a child element, and you can put pretty much anything in a box that retains its aspect ratio.
HTML:
<div class="aspectwrapper">
<div class="content">
</div>
</div>
CSS:
.aspectwrapper {
display: inline-block; /* shrink to fit */
width: 100%; /* whatever width you like */
position: relative; /* so .content can use position: absolute */
}
.aspectwrapper::after {
padding-top: 56.25%; /* percentage of containing block _width_ */
display: block;
content: '';
}
.content {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0; /* follow the parent's edges */
outline: thin dashed green; /* just so you can see the box */
}
The display: inline-block
leaves a little extra space below the bottom edge of the .aspectwrapper
box, so another element below it won't run flush against it. Using display: block
will get rid of it.
Thanks to this post for the tip!
Another approach relies on the fact that browsers respect an image's aspect ratio when you resize only its width or height. (I'll let google generate a 16x9 transparent image for demonstration purposes, but in practice you would use your own static image.)
HTML:
<div class="aspectwrapper">
<img class="aspectspacer" src="http://chart.googleapis.com/chart?cht=p3&chs=160x90" />
<div class="content">
</div>
</div>
CSS:
.aspectwrapper {
width: 100%;
position: relative;
}
.aspectspacer {
width: 100%; /* let the enlarged image height push .aspectwrapper's bottom edge */
}
.content {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
outline: thin dashed green;
}
-
1can you put up a jsFiddle example with a perfect box (all sides euqal) resizing using the first method? I didn't quite get how it can be done using your first method. – vsync Mar 28 '12 at 15:40
-
4Here you are: http://jsfiddle.net/ks2jH/1/ Note that the key to making it a perfect box is the `padding-top: 100%` which means the height should be 100% of the size of the `.aspectwrapper` width. Since that width is set to 50%, it will resize with its parent. I also added `overflow: hidden` so the text wouldn't deform the box at small sizes. – ʇsәɹoɈ Mar 28 '12 at 20:30
-
If you wanted a rectangle half as tall as it is wide, you would use `padding-top: 50%`. In my example above, I made a 16:9 rectangle, suitable for wide screen video, using `padding-top: 56.25%` (9/16 = 56.25%). – ʇsәɹoɈ Mar 28 '12 at 21:58
-
-
6this only seems to resize against the width. so it doesn't resize the width of the div so that the height fits. so it is not really fit-into-viewport but just rather boring old easy to achieve aspect ratio maintain. – Lassi Kinnunen Nov 14 '13 at 07:39
-
@LassiKinnunen Hint: You can build more complex things out of simpler things. – ʇsәɹoɈ Aug 13 '17 at 01:10
-
@ʇsәɹoɈ sure you can, but it doesn't seem to do what the topic of this question is. I've forgot the exact scenario I needed it for, but I think the thing was that I had a div and had to take that div and just plonk it inside another for one reason or another so that it fit entirely and whichever side didn't fit was made to fit while the other side was scaled in the same aspect. not that the other answers in this thread are too great either mind you. – Lassi Kinnunen Aug 23 '17 at 05:16
-
One very useful addition to the first variant: if you use `padding-top: 25%` in `.aspectwrapper::after` and `max-width: 400vh` in `.aspectwrapper`, the aspect wrapper fits not only the width of the viewport, but also its height (whichever constrains more). This is extremely useful when scaling a mostly fixed layout like presentation slides. – Palec Aug 24 '20 at 16:08
Thanks to Geoff for the tip on how to structure the math and logic. Here's my jQuery implementation, which I'm using to size a lightbox so it fills the window:
var height = originalHeight;
var width = originalWidth;
aspect = width / height;
if($(window).height() < $(window).width()) {
var resizedHeight = $(window).height();
var resizedWidth = resizedHeight * aspect;
}
else { // screen width is smaller than height (mobile, etc)
var resizedWidth = $(window).width();
var resizedHeight = resizedWidth / aspect;
}
This is working well for me right now across laptop and mobile screen sizes.

- 59
- 1
- 4
-
2Your check of `height < width` is only correct for an aspect ratio of 1:1. – talljosh Mar 07 '12 at 11:00
-
1with little refinery this works, but your IF doesnt check for the right thing var vw=$("#absoluteSized").width(); var vh=$("#absoluteSized").height(); var divAspect=vw/vh; if(divAspect > aspect) { resizedHeight = vh; resizedWidth = resizedHeight * aspect; } else { // screen width is smaller than height (mobile, etc) resizedWidth = vw; resizedHeight = resizedWidth / aspect; } – Lassi Kinnunen Nov 14 '13 at 08:10
-
@TRMW, please fix your answer per the comments, otherwise it should be considered wrong. – BBaysinger Jul 13 '22 at 20:10
I have a different pure HTML/CSS approach which does not rely on padding or absolute positioning. Instead it uses em
units and relies on the CSS min() function plus a little bit of math.
Imagine that we want a viewport div with 16:9 aspect ratio which always fits the browser window and is centered in the axis with excess space. Here's how we can accomplish that:
HTML
<body>
<div class="viewport">
<p>
This should be a 16:9 viewport that fits the window.
</p>
</div>
</body>
CSS
body {
width: 100vw;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
font-size: min(1vw, 1.778vh);
}
div.viewport {
width: 100em;
height: 56.25em;
background-color: lightblue;
}
div.viewport > p {
font-size: 3em;
text-align: center;
}
You can experiment with this in a sample JSFiddle here.
The secret sauce is in the body font-size
. It should be set to min(1vw, Avh)
, where A
is the aspect ratio you want the div to have, i.e. width / height
. In the example above we're using 1.778, which is approximately 16 / 9.
In CSS, em
units are based on the font-size
of the element, which is inherited from parent element if not explicitly set. For your viewport div, set the width
to 100em
(NOT rem) and the height
to Iem
, where I
is the inverse of the aspect ratio expressed as a percentage, i.e. 100 / A
or 100 * height / width
. In the example above we're using 56.25, which is 100 * 9 / 16.
One bonus of this approach is that all of your nested elements may also use em
units so that they always scale precisely with the size of the viewport. You can see this used on the p
element in the example.
Note that as an alternative to the above, you may set the font-size on your html
element and use rem
units everywhere. CSS rem
units are similar to em
units but always relative to the root element's font-size
.

- 1,646
- 11
- 15
Javascipt:
//Responsive Scaling
let outer = document.getElementById('outer'),
wrapper = document.getElementById('wrap'),
maxWidth = outer.clientWidth,
maxHeight = outer.clientHeight;
window.addEventListener("resize", resize);
resize();
function resize(){
let scale,
width = window.innerWidth,
height = window.innerHeight,
isMax = width >= maxWidth && height >= maxHeight;
scale = Math.min(width/maxWidth, height/maxHeight);
outer.style.transform = isMax?'':'scale(' + scale + ')';
wrapper.style.width = isMax?'':maxWidth * scale;
wrapper.style.height = isMax?'':maxHeight * scale;
}
HTML:
<div id="wrap">
<div id="outer">
{{ fixed content here }}
</div>
</div>
Styling:
/* Responsive Scaling */
#wrap {
position: relative;
width: 1024px;
height: 590px;
margin: 0 auto;
}
#outer {
position: relative;
width: 1024px;
height: 590px;
transform-origin: 0% 0%;
overflow: hidden;
}

- 1,081
- 3
- 15
- 31
This is possible with JQuery and a bit of maths.
Use JQuery to get the view ports width and height as well as the divs current dimensions.
$(document).width();
Calculate the divs current aspect ratio. eg width/height
You need a bit of logic to determine whether to set the width or height first, then use the initial ratio to calculate the other side.

- 18,538
- 4
- 62
- 85
-
+1 for providing the simple math route rather than the plugin route. – eyelidlessness Oct 05 '09 at 23:23
jQuery has a plugin that grows an object until one of its sides reaches a certain px-value. Coupling this will the viewport's height, you could expand any element to that size: jQuery MaxSide.

- 8,598
- 83
- 57
- 92

- 265,109
- 74
- 539
- 565