如何扩展包装器div及其内部内容？

Question

我需要扩展包含其他嵌套div的div

使用zoom属性可以正常工作：

https://jsfiddle.net/aq11qjro/1/

但我知道Firefox浏览器存在一些问题，所以我想使用CSS scale属性

使用transform: scale：

https://jsfiddle.net/aq11qjro/

我无法达到预期的效果。

我在这里做错了什么？

Answer 1

要将尺寸增加到250％，您应该使用scale(2.5, 2.5)代替scale(2, 2)：

但更重要的是。 transform: scale缩放div并将其置于原始空间中心。因为它的尺寸较大，所以它将位于屏幕之外。您可以添加transform-origin: top left;以指定缩放元素的左上角应锚定到原始空间的左上角。

使用正确的比例和变换原点更新了小提琴：https://jsfiddle.net/aq11qjro/7/

Answer 2

您需要将原点设置为左上角

transform-origin: top left;

fiddle

（编辑：我把错误的小提琴联系起来：纠正了）