1

ウィンドウのサイズ変更時に親divに合うように子div要素をscale（X）しようとしています。親の幅と子の幅を割って縮尺比を計算しましたが、問題なく動作します。

しかし、位置合わせは適切ではありません。最初に、子のdivマージンを設定しました-親のdivから50ピクセル左に移動します。そのスケールで維持されていません。

これは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 に答える