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

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

图片描述

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

css3 前端

阅读 15.7k

7 个回答

得票最新

小清新纯

3244411

发布于
2016-09-11

transform是不会引起重排的，也就是说对元素进行缩放等操作不会影响到其他元素的布局，这样做动画之类的效果性能会更好。如果你要在缩放的同时改变元素的占据空间，那就用zoom做缩放。

生峰狼牙人

42174963

发布于
2016-09-06

同是菜鸟，好像无解，但是可以定位缩放的点，transform-origin:left top，使用这个可以从左上角缩放，至于大小还是原始大小，给父元素加个overflow：hidden吧

胖虎

2001310

发布于
2016-09-28

试试zoom缩小

李佳平

发布于
2016-09-11

新手上路，请多包涵

同大小透明div放到下面

胡恩澍

发布于
2016-09-12

新手上路，请多包涵

希望对你有帮助
<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>

<div id="d1">
<span>内容</span>
</div>
<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>