demo在这 ， https://jsfiddle.net/qk83j2wv/
使用scale（0.5）缩小一个元素，但缩小后的元素还是占据原来元素的大小空间，
怎样让那个元素缩小后的大小和所占据的空间一样大呢？
但外层元素还是以缩小前来布局的...
高洛峰2017-04-17 11:49:13
同是菜鸟，好像无解，但是可以定位缩放的点，transform-origin:left top，使用这个可以从左上角缩放，至于大小还是原始大小，给父元素加个overflow：hidden吧
ringa_lee2017-04-17 11:49:13
transform是不会引起重排的，也就是说对元素进行缩放等操作不会影响到其他元素的布局，这样做动画之类的效果性能会更好。如果你要在缩放的同时改变元素的占据空间，那就用zoom做缩放。
怪我咯2017-04-17 11:49:13
希望对你有帮助
<style>
#d1 {
width:200px;
height:60px;
border:1px solid red;
transform-origin:left top;
}
#d1>span {
display:block;
font-size:32px;
line-height:60px;
background:#F90;
}</style>
<body>
<p id="d1">
<span>内容</span>
</p>
<span class="btn">点我</span>
<script>
$(function(){
var i = true;
$('.btn1').click(function(){
if(i){
$('#d1').css({transform:'scale(0.5)'});
i = false;
}else {
$('#d1').css({transform:'scale(1)'});
i = true;
}
});
})
</script></body>
阿神2017-04-17 11:49:13
纯CSS不会，囧。
不过有一个思路，可以给一个父元素做为wrapper，然后用 JavaScript 计算出compute style的高和宽，再相应缩小为50%。