Scale DIV keeping the aspect ratio - Not working in Firefox

Question

I am using a Script to Scale a Div maintaining the aspect ratio. The goal is to keep 100% of the DIV visible while making it as big as possible. If you scale the browser very wide, the div has 100% height, if you scale the browser very high, it has 100% width. I dope you understand what I mean.

I'm currently using javascript/jquery to detect this and change some CSS values:

"position": "fixed",
"-webkit-transform": "translateZ(0)",
"-ms-transform": "translateZ(0)",
"zoom": (scaleY * 100) + "%"

You can take a look at it here:

jsfiddle

var scaleX = 0;
var scaleY = 0;
var a = 1;


function fillDiv(div) {

    div.parent().css({
        "left": "auto"
    });

    currentWidth = div.width();
    scaleX = $(window).width() / currentWidth;

    currentHeight = div.height();
    scaleY = $(window).height() / currentHeight;

    if (($(window).height() / currentHeight) * currentWidth <= $(window).width()) {
        div.css({
            "position": "fixed",
            "-webkit-transform": "translateZ(0)",
            "-ms-transform": "translateZ(0)",
            "zoom": (scaleY * 100) + "%"
        });
    } else if (($(window).width() / currentWidth) * currentHeight <= $(window).height()) {
        div.css({
            "position": "fixed",
            "-webkit-transform": "translateZ(0)",
            "-ms-transform": "translateZ(0)",
            "zoom": (scaleX * 100) + "%"
        });
    }
}

$(document).ready(function() {
    fillDiv($("#content"));
});

$(window).bind("resize", function() {
    fillDiv($("#content"));
});

* {
  margin: 0;
  padding: 0;
}
.content {
    background-color: #dd0000;
    width: 300px;
    height: 600px;
}

.wrapper {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper" id="wrapper">
  <div class="content" id="content">
  </div>
</div>

Since the latest update, Firefox doesn't support it anymore. Any other browser seems to work fine. I couldn't find a solution fot this yet since I don't know where to start. Maybe there's even a much simpler CSS only solution for this.

Any help is highly appreciated.

Do you want the content to be automatically resized too? for example the image sizes, the font width/heights too without any change like scaling? — Taha Paksu, Feb 27 '17 at 12:57
Okay, the "zoom" function does the damage. I added -moz-transform for Firefox to scale the content. This seems ti work pretty well. But now, only on load / reload the div is scaled correctly in FF. When resizing the browser it's kind of glitching. new fiddle: https://jsfiddle.net/fmvr7hbo/ — hallibus, Feb 27 '17 at 13:54

Taha Paksu · Answer 1 · 2017-02-27T14:03:51.170

Does something like this work?

$(window).resize(function() {
  $(".content").each(function() {
    var elementHeight = $(this).outerHeight();
    var windowHeight = $(window).innerHeight();
    $(this).css("transform", "scale(" + (windowHeight / elementHeight) + ")");
  });
});
$(window).resize();

* {
  margin: 0;
  padding: 0;
}

.content {
  width: 300px;
  height: 500px;
  background: ghostwhite;
  transform-origin: top left;
  ms-transform-origin: top left;
  moz-transform-origin: top left;  
  webkit-transform-origin: top left;
}

.content * {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper" id="wrapper">
  <div class="content" id="content">
    <h1>Cupcake ipsum dolor sit amet</h1>
    <img src="http://placehold.it/350x150">
    <p>
      Fruitcake macaroon candy canes marshmallow gummi bears biscuit I love dessert. Oat cake sugar plum marzipan gummi bears marshmallow I love brownie jelly bonbon. Sweet roll apple pie wafer fruitcake. Gummi bears lemon drops sesame snaps. Biscuit tiramisu
      sugar plum. Carrot cake pastry cupcake tootsie roll chocolate jujubes. Pudding muffin sweet. Cheesecake candy canes wafer gingerbread sweet.
    </p>
  </div>
</div>

Scale DIV keeping the aspect ratio - Not working in Firefox

1 Answers1