是否有一种方法,最好不使用JS,使容器在下面的代码片段中包装缩放的,更通用的,转换后的子元素,即纯红外边框完全包含虚线蓝色边框？
顺便说一下,这似乎是一个浏览器错误,因为它违反了默认的盒子模型行为,父母的大小会自动调整为适合孩子.
#container {
border: 1px solid red;
}
#scaled {
border: 1px dashed blue;
transform: scale(3, 3);
transform-origin: 0 0;
}
container
scaled 3x
没有使用JavaScript就没有办法做到这一点,但它也不是一个浏览器错误.在计算页面流并确定每个非变换元素的位置和大小之后,CSS变换在图形管道中发生.
这意味着CSS变换不会导致重新计算任何其他元素的大小,这就是为什么不调整容器大小以包含已转换的子元素的原因.这实际上是一个transform旨在通过完全避免布局重新计算来提高性能的功能.
干净利落的唯一方法是将变换应用于父元素,这似乎是你试图摆脱的.如果你想要它是动态的,并且你想远离JS,那么很遗憾没有别的办法.
#container {
border: 1px solid red;
transform: scale(3, 3);
transform-origin: 0 0;
}
#scaled {
border: 1px dashed blue;
}
container
scaled 3x
京公网安备 11010802040832号 | 京ICP备19059560号-6 
