2

div のコンテンツをズームしようとしています (ブラウザーのズームと同じ動作)。たくさん検索した後、css 3 変換スケール プロパティがこの要件を完全に満たすことがわかりました。スケール サイズを大きくするとコンテンツがズームされますが、div のコンテンツが失われます。オーバーフロー: 非表示も役に立ちませんでした。

var currentZoom = 1.0;

$(document).ready(function () {
    $('#btn_ZoomIn').click(
        function () {
            currentZoom = currentZoom+0.04;
            var scaleString = "scale("+currentZoom+")";
            $('#divName').css("transform", scaleString);
        })
    $('#btn_ZoomOut').click(
        function () {
            //var scaleString = "scale("+currentZoom -= .1+")";
            currentZoom = currentZoom-0.04;
            var scaleString = "scale("+currentZoom+")";
            $('#divName').css("transform", scaleString);
        })

});

JS フィドル リンク: http://jsfiddle.net/chaitut715/k4WsB/

4

1 に答える 1

2

の周りにコンテナを追加し#divNameます:

<div class="wrapper">
    <div id="divName">
        <img src="https://www.google.co.in/intl/en_ALL/images/srpr/logo11w.png"></img>
    </div>
</div>

そしてoverflow: hidden;、新しいコンテナに設定します:

.wrapper {
    overflow: hidden; /* 'auto' would probably be better */
    width: 500px;
}

ワーキングデモ

于 2014-05-08T11:56:00.550 に答える