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上运行（较旧即不使用某些相同的语法但具有相同的功能）但是一旦你将它切换到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;}

Answer 2

尝试不变换：

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

div scale以保持纵横比

2 个答案: