Javascript 保持纵横比的div比例

我有这样一个布局：

HTML

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

我试图做的是缩放容器和内容，以保持其当前的纵横比。现在我使用的是

transform:scale（）

，它工作得很好，但是我在Internet Explorer中遇到了严重的问题

这是到目前为止我的代码。有没有人对如何在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 + ')'
    });
}

---

我没有设置jquery，但有一个使用原始html和javascript的示例。它可能不会按原样在IE上运行（较旧的IE不使用某些相同的语法，但具有相同的功能），但一旦切换到jquery，就应该可以了

代码：

功能缩放项目（比率）{
变量i，高度；
var-box=document.getElementsByClassName（“box”）；
对于（i=0；i尝试不转换：

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

应该有帮助
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;}

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