CSS scale属性占位

在编写nav时因为原声图标的PNG图片过大，于是选用scale属性进行缩放，可是后来发现缩放后依然占有原来图片的位置。

    <div class="container">
        <img src="./home-1.png">
        <span>AAAAAAAAAAAAAAAAAAAA</span>
    </div>

图片1
图片原大小为201200，父盒子大小是200200

图片2

使用 {transform : scale(0.5)} 后，图片查看大小是100.5*100

但是可以看出子元素span依然被挤出父盒子,图片依然占有原图片大小的位置。

图片3

使用 { zoom:0.5 } 后，查看图片大小依然是201*200，但是显示大小已经缩小了一半。子元素可以在盒子中显示

对于正方图片也可以使用设置宽高来限制显示大小