Question

我正在尝试缩放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/

Answer 1

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

Working demo

使用transform scale属性缩放div内的内容

1 个答案: