我注意到的问题是，当元素缩放时，浏览器会更改其像素比例，而不是像素数量。元素较小，但不会更改DOM中的实际像素大小。因此，我认为不存在仅CSS解决方案。
我将可缩放元素放入容器，该容器保持与其余元素相同的像素比率。使用Java脚本，我只需更改容器的大小即可。一切仍然基于CSS3转换：缩放。也许JS代码可能更简单，但是现在所有的想法都在这里（只是概念的证明）；）摆弄两个例子
HTML：
<div > <div scalex='0.5' scaley='0.5'> Nunc et nisi ante. Integer in blandit nisi. Nulla facilisi. Vestibulum vulputate sapien eget mauris elementum sollicitudin. Nullam id lobortis dolor. Nulla vitae nibh vitae sem volutpat pretium. Nunc et nisi ante. Integer in blandit nisi. Nulla facilisi. Vestibulum vulputate sapien eget mauris elementum sollicitudin. Nullam id lobortis dolor. Nulla vitae nibh vitae sem volutpat pretium. </div></div>
CSS：
.overall-scalable {width: 350px; height: 150px; overflow: hidden; -webkit-transition: all 1s;}.scalable {color: #666; width: 350px; height: 150px; -webkit-transform-origin: top left; -webkit-transition: all 1s;}JS：
$('button').click(function() { $('.scalable').each(function(){ rescale($(this)); })});function rescale(elem) { var height = parseInt(elem.css('height')); var width = parseInt(elem.css('width')); var scalex = parseFloat(elem.attr('scalex')); var scaley = parseFloat(elem.attr('scaley')); if (!elem.hasClass('rescaled')){ var ratioX = scalex; var ratioY = scaley; }else{ var ratioX = 1; var ratioY = 1; } elem.toggleClass('rescaled'); elem.css('-webkit-transform', 'scale('+ratioX +', '+ratioY+')'); elem.parent().css('width', parseInt(width*ratioX) + 'px'); elem.parent().css('height', parseInt(height*ratioY) + 'px');}
