使用scale属性缩放后产生空白区域

2020.09.21 - GJX

目前有一个div,css属性中设置了scale缩放,但是缩放后该div占位仍然是缩放前的占位。现在希望该占位能够按照缩放后的大小进行占位,下面是图示:

提示:

黑色线框代表外部容器,并没有设置固定宽高

红色线框是我们要缩放的容器

scale缩放前
scale缩放后

如图,在div缩放后,外部容器的高度并没有随着div高度的缩放而减小,而是仍然被内部容器撑开,所以此时使用margin-bottom负值的方式来解决这个问题。

给缩放后的容器加上margin-bottom:-(缩放前高度-缩放前高度*缩放比例)

- END -

96
0

文章标签: