Scale a Div to Fit in Window But Preserve Aspect Ratio

Scale div to fill screen while maintaining aspect ratio

I don't think this can be done with CSS only currently, as you would need to be able to read the width of certain elements, this cannot be done at the moment. But since JS is OK with you now, you could do something like this using jQuery:

function zoomit() {
  $("#page1").css('zoom', $(window).width() / $("#page1").width());
}

$(document).ready(zoomit);

$(window).resize(zoomit);

Here's a jsFiddle

Here's a jsFiddle of the latest version which doesn't use zoom but -transform vendor tags only.

Edit:

I just realised that zoom doesn't actually work on Firefox. Instead you could use -moz-transform: scale(x, y); for Firefox and set x and y to the appropriate values, which you can work out in the same way as I have already done in the example above.

Edit2

Here's a link to w3schools with some info about CSS 2D transforms and the prefixes for other browsers, as you mentioned in the comments, writing something that checks if for width > height and the other way around, and then basing the transform on that, should do the trick for all browsers. Post the jsFiddle if you get it working and I'll add it to the answer, I'm happy to have a go at it if you don't get it working.

Keep aspect ratio of div when resizing window

To resize to fit inside the window while maintaining aspect ratio, set up your container with an initial size and then divide the area width by the container's width to get the scale. You then need a check to make sure that scale doesn't make the height too great. See code below and fiddle - I've added the case where the height is greater than the width too for completeness.

To stop the flashing, throttle your resize function using setTimeout. This will ensure that update is only called once every n milliseconds. You can play with the number until you find the right balance.

var container = $('#container'),
    updateTimeout,
    threshold = 100;

function update() {
    var windowWidth = $(window).width(),
        windowHeight = $(window).height(),
        width = container.width(),
        height = container.height(),
        scale;

    if ( windowWidth > windowHeight ) {
        scale = windowWidth / width;
        if ( height * scale > windowHeight ) {
            scale = windowHeight / height;
        }
    }
    else {
        scale = windowHeight / height;
        if ( width * scale > windowWidth ) {
            scale = windowWidth / width;
        }
    }
    container.width(Math.round(width * scale));
    container.height(Math.round(height * scale));
}

$(document).ready(function() {
    update();
});

$(window).resize(function() {
    clearTimeout(updateTimeout);
    updateTimeout = setTimeout(update, threshold);
});

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 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>

Scale div so that it always keeps its aspect ratio and stays centered

<script>
    $(document).ready(function() {
        adjustDivHeight();
        $(window).resize(function() {
            adjustDivHeight();
        });
    });

    function adjustDivHeight() {
        setTimeout(function() {
            var width = $('#div_container_adjustable').width();
            var height = width * 0.5589123;
            $('#div_container_adjustable').height(height);
        }, 300);
    }
</script>
<div id="div_container_adjustable" class="detail_image"></div>

Scale div with its content to fit window

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;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background: #e6e9f0;
  margin: 10px 0;
}

#wrap {
  position: relative;
  width: 640px;
  height: 480px;
  margin: 0 auto;
}
#outer {
  position: relative;
  width: 640px;
  height: 280px;
  background: url('https://source.unsplash.com/random') no-repeat center center;
  transform-origin: 0% 50%;
  border-radius: 10px;
  box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
#outer:before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

#profile {
  background: url('https://source.unsplash.com/random/300x300') no-repeat center center;
  position: absolute;
  width: 60px;
  height: 60px;
  bottom: 0;
  margin: 20px;
  border-radius: 100px;
  background-size: contain;
}
#content {
  font-size: 20px;
  position: absolute;
  left: 0px;
  bottom: 0;
  margin: 30px 100px;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

#content div:last-child {
  font-size: 15px;
  opacity: 0.7;
}

<div id="wrap">
<div id="outer">
  <div id="profile"></div>
  <div id="content">
    <div>Monwell Partee</div>
    <div>UX / UI Designer</div>
  </div>
</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 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).

Keep div's aspect ratio and fill it to window with CSS only

For portrait screens, use a width of 100vw (the width of the window) and a height of 75vw (75% of the width of the window). For landscape screens, base the shape of the div on the height rather than the width.

body {  margin:0;}div {  width: 100vw; height:75vw;  background:#BBB;  margin:0 auto;}
@media screen and (min-aspect-ratio: 4/3) {  div {    width:133.33vh; height:100vh;  }}

<div></div>

---

Related Topics