css3 - 使用transform scale属性在div内缩放内容

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

最佳答案

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