前端 - 怎样让scale缩小的元素不占据原来的空间？

Question

demo在这 ， https://jsfiddle.net/qk83j2wv/
使用scale（0.5）缩小一个元素，但缩小后的元素还是占据原来元素的大小空间，
怎样让那个元素缩小后的大小和所占据的空间一样大呢？

但外层元素还是以缩小前来布局的...

Answer 1

同是菜鳥，好像無解，但是可以定位縮放的點，transform-origin:left top，使用這個可以從左上角縮放，至於大小還是原始大小，給父元素加個overflow：hidden吧

Answer 2

transform是不會引起重排的，也就是說對元素進行縮放等操作不會影響到其他元素的佈局，這樣做動畫之類的效果性能會更好。如果你要在縮放的同時改變元素的佔據空間，那就用zoom做縮放。

Answer 3

同大小透明p放到下面

Answer 4

希望對你有幫助

<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>

Answer 5

試試zoom縮小

Answer 6

理論上是無解的，這個要試著調整一下整體佈局來達到你要的效果

Answer 7

純CSS不會，囧。
不過有一個思路，可以給一個父元素做為wrapper，然後用 JavaScript 計算出compute style的高和寬，再相應縮小為50%。