html - 如何缩放容器以匹配其缩放(或以其他方式转换)的内容？

Question

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

I think I can understand why the behavior is like this ，但是有没有什么方法可以让容器占用与其内容一样多的空间并应用缩放(以及其他转换，如果可能)？

我应该注意明确设置 width和 height的 <div> outside 影响缩放文本的内容(在我的情况下这不是期望的行为)。将缩放后的内容放在 <iframe> 中是我想避免的事情。

Answer 1

如果不求助于 Javascript，我认为没有任何方法可以做到这一点。 CSS 转换不会影响转换元素附近元素的布局流，它们只会更改该元素内的坐标系；所以 child 会受到影响，但 parent 或 sibling 不会受到影响(MDN 对此有更多详细信息)。

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