css - 使用 transform scale 属性缩放 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 fiddle 链接: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