css - 使用变换比例属性缩放 div 内的内容

Question

我正在尝试缩放 div 的内容（与浏览器缩放的行为相同）。经过大量搜索后，我发现 css 3 transform scale 属性将完全满足此要求。当我增加比例大小时内容正在缩放，但我丢失了 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;
}

工作演示