如何缩放容器以匹配其缩放（或以其他方式转换）的内容？答案

【问题标题】：How can I scale a container to match its scaled (or otherwise transformed) content?如何缩放容器以匹配其缩放（或以其他方式转换）的内容？
【发布时间】：2013-07-09 10:34:17
【问题描述】：

我有一个<div>，其中一些复杂的内容通过应用缩放变换呈现。我的问题是 <div> 占用的空间与即使未应用任何转换也会占用相同的空间。我做了一个jsFiddle snippet 来说明我的意思。

I think I can understand why the behavior is like this，但是有什么方法可以让容器在应用缩放（以及其他转换，如果可能的话）的情况下占用与其内容一样多的空间？强>

我应该注意，在外部显式设置<div> 的width 和height 会影响缩放文本的内容（在我的情况下，这不是所需的行为）。我想避免将缩放后的内容放在<iframe> 中。

【问题讨论】：

我不确定您正在测试什么浏览器，但对我来说（Chrome 27 / Firefox 22），我必须修改为 this 才能真正看到转换效果。编辑：看起来 Chrome/Firefox 不接受 display:inline 上的转换。不过 Opera 12 运行良好。
@Passerby 是的，我正在使用 Opera，忘记在其他浏览器上测试我的 sn-p。我让他们inline 只是为了让我的观点在视觉上更容易识别，但这部分对问题并不重要。感谢您指出这一点，我将包括您的 sn-p。
变换原点：左上角；否则坐标可能是您答案的开始。

标签： html css transform

【解决方案1】：

如果不使用 Javascript，我认为没有任何方法可以做到这一点。 CSS 变换不会影响被变换元素附近元素的布局流，它们只会改变该元素内的坐标系；所以孩子会受到影响，但不会影响父母或兄弟姐妹（MDN 对此有更多详细信息）。

这里有一个很好的答案，可能是基于 JS 的部分解决方案：https://stackoverflow.com/a/10913299/2524360

【讨论】：

有总比没有好！

【解决方案2】：

我不知道这是否回答了您的问题，但它似乎不接受 0 作为值。浏览器从 1（如 100%）缩放到例如4 或 400%。

transform:scale(1,4);

【讨论】：