1

我正在尝试缩放（X）子 div 元素以适应窗口调整大小的父 div。我通过将父宽度和子宽度相除来计算缩放比例，并且效果很好。

但是对齐是不正确的。最初，我将我的子 div 边距设置为距父 div 50 px。它没有保持在规模上。

这是 HTML/css 代码

#wrap {
    margin-left:50px;
    width:300px;
    height:300px
}
#parentDiv {
    width:500px
        height:300px;
}

    <body>
        <div id="parentDiv">
        <div id="wrap">           
            <img id="image" width="300px" src="http://placekitten.com/640/480" />
        </div>
        </div>      
    </body>

这是调整大小的js代码

 window.onresize = function() {
    scaleDiv();
  };

scaleDiv = function() {
    parentWidth = $('#parentDiv').width();
    scale = (parentWidth) / $('#wrap').width();
    new_width = $('#wrap').width() *     scale;
    $('#wrap').css('-webkit-transform', ' scaleX(' + scale + ')');
}

经过一番谷歌搜索，我开始知道我可以使用translateX属性来保持原始对齐。但我对如何计算翻译值感到震惊。

  $('#wrap').css('-webkit-transform', 'translateX(20%)' + ' scaleX(' + scale + ')');

我在翻译道具上放了 20% 的随机值，它不合适。有人可以帮助我如何计算这个价值属性。

这是jsfiddle 测试链接

4

1 回答 1

6

您需要指定变换原点；默认情况下，这设置为 50% 和 0%，但您可以使用如下transform-origin属性覆盖它：

#wrap {
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
}
于 2013-03-15T11:34:19.913 回答