Question

有没有办法将容器的大小调整为<em>自己内容的百分比？

我有一个与缩放内容有关的棘手问题。对某些内容进行transform: scale(...)工作就像我想要显示一样，但不幸的是，内容仍然具有与原始内容相同的有效大小。当内容需要在没有垂直间距的情况下流到缩放内容之下时，这是有问题的。

例如，给定此HTML：

<div class="scaled-preview">
  <div class="content">...</div>
</div>
<div class="stuff-below">Stuff below</div>

...而且这个CSS：

.content {
  transform: scale(0.4);
  width: 250%; /* Inverse of the scale */
}

... .stuff-below位于其下方，就像缩放一样。

您可以在this JSFiddle中看到这一点。

要缩放的内容的大小未知，但比例因子是已知的。有没有办法让.scaled-preview设置为自己内容的百分比？

Answer 1

这可能不是您正在寻找的解决方案，但它可能以不寻常的方式解决您的问题。

当浏览器计算转换信息时，布局很难固化，因此我无法想到让内容高度反映转换高度的方法。所以，我尝试使用font-size。它也可以转换，您甚至可以使用TalkModifier值来调整元素的大小。唯一的缺点是，我必须指定一个特定的em值，以便变化的字体大小不会在转换过程中导致换行。