我正在尝试缩放 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 fiddle 链接: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;
}
关于css - 使用变换缩放属性缩放 div 内的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23540242/