div scale to preserve aspect ratio

Question

I have a layout like so:

HTML

<div id="container">
    <div id="zoomBox">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

CSS

#container { width:100%; }
#box { height:1000px;width:920px; }

What I am trying to do is scale my container and the contents to preserve the aspect ratio it is currently in. Right now I use the transform: scale() and it works great but I am having serious issues with it working in Internet Explorer.

This is my code so far. Does anyone have any other suggestions in making this work nicely in IE?

function zoomProject(percent)
{
    $maxWidth = $("#container").width();

    if(percent == 0)
        percent = $maxWidth/920;

    $("#zoomBox").css({
        'transform': 'scale(' + percent + ')',
        '-moz-transform': 'scale(' + percent + ')',
        '-webkit-transform': 'scale(' + percent + ')',
        '-ms-transform': 'scale(' + percent + ')'
    });
}

Answer 1

I don't have jquery set up but an example using raw html and javascript. It probaly wont run on IE as is (older ie doesn't use some of the same syntax but has the same functionality) but once you switch it over to jquery it should be fine.

Code:

function zoomProject(ratio) {
  var i, height;
  var boxes = document.getElementsByClassName("box");

  for (i=0;i<boxes.length;i++) {
    height = (boxes[i].offsetWidth * ratio) + "px";
    boxes[i].style.height = height;
  }
}

zoomProject(.1);

.container { background: red; width: 100%; height: 100%; }
.box { background: blue; width: 100%; border: 1px solid white;}

Answer 2

Try without transform:

new_width = width * percent / 100;
new_height = height * percent / 100;
$("#zoomBox").css('width',new_width);
$("#zoomBox").css('height',new_height);