demo在这 ， https://jsfiddle.net/qk83j2wv/使用scale（0.5）缩小一个元素，但缩小后的元素还是占据原来元素的大小空间，怎样让那个元素缩小后的大小和所占据的空间一样大呢？
但外层元素还是以缩小前来布局的...
走同样的路，发现不同的人生
同是菜鸟，好像无解，但是可以定位缩放的点，transform-origin:left top，使用这个可以从左上角缩放，至于大小还是原始大小，给父元素加个overflow：hidden吧
transform是不会引起重排的，也就是说对元素进行缩放等操作不会影响到其他元素的布局，这样做动画之类的效果性能会更好。如果你要在缩放的同时改变元素的占据空间，那就用zoom做缩放。
transform
zoom
同大小透明p放到下面
希望对你有帮助<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>
试试zoom缩小
理论上是无解的，这个要试着调整一下整体布局来达到你要的效果
纯CSS不会，囧。不过有一个思路，可以给一个父元素做为wrapper，然后用 JavaScript 计算出compute style的高和宽，再相应缩小为50%。
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
同是菜鸟，好像无解，但是可以定位缩放的点，transform-origin:left top，使用这个可以从左上角缩放，至于大小还是原始大小，给父元素加个overflow：hidden吧
transform是不会引起重排的，也就是说对元素进行缩放等操作不会影响到其他元素的布局，这样做动画之类的效果性能会更好。如果你要在缩放的同时改变元素的占据空间，那就用zoom做缩放。同大小透明p放到下面
希望对你有帮助
<style>
</style>
<body>
</body>
试试zoom缩小
理论上是无解的，这个要试着调整一下整体布局来达到你要的效果
纯CSS不会，囧。
不过有一个思路，可以给一个父元素做为wrapper，然后用 JavaScript 计算出compute style的高和宽，再相应缩小为50%。