javascript - div比例以保持纵横比

Question

我有这样的布局:

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

我想做的是缩放我的容器和内容以保持它当前的纵横比。现在我使用 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 + ')'
    });
}

Answer 1

我没有设置 jquery，而是使用原始 html 和 javascript 的示例。它可能不会按原样在 IE 上运行(较旧的 ie 不使用一些相同的语法但具有相同的功能)但是一旦你将它切换到 jquery 它应该没问题。

代码:

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