Question

有没有办法，最好不使用JS，在下面的代码片段中创建容器来包装缩放的，更通用的转换后的子元素，即纯红外边框是否完全包含虚线蓝色边框？

顺便说一句，这似乎是一个浏览器错误，因为它违反了默认的盒子模型行为，父母的大小会自动调整以适合孩子。

#container {
  border: 1px solid red;
}

#scaled {
  border: 1px dashed blue;
  transform: scale(3, 3);
  transform-origin: 0 0;
}

<div id="container">
  container
  <div id="scaled">
    scaled 3x
  </div>
</div>

Answer 1

如果不使用JavaScript，就无法做到这一点，但它也不是浏览器错误。在计算页面流并确定每个非变换元素的位置和大小之后，CSS变换在图形管道中发生。

这意味着CSS变换不会导致重新计算任何其他元素的大小，这就是为什么不调整容器大小以包含已转换的子元素的原因。这实际上是transform的一个功能，旨在通过完全避免布局重新计算来提高性能。

你可以干净利落的唯一方法是将变换应用于父元素，这似乎是你试图摆脱它。如果你想要它是动态的，并且你想远离JS，那么很遗憾没有别的办法。

#container {
  border: 1px solid red;
  transform: scale(3, 3);
  transform-origin: 0 0;
}

#scaled {
  border: 1px dashed blue;
  
}

<div id="container">
  container
  <div id="scaled">
    scaled 3x
  </div>
</div>

Answer 2

由于Maximillian Laumeister's Answer给出的原因而没有变换的明显给出的结果可能是：

＆＃13;

#container {
  border: 1px solid red;
}

#scaled {
  border: 3px dashed blue;
  font-size:3em;
}

＆＃13;

<div id="container">
  container
  <div id="scaled">
    scaled 3x
  </div>
</div>

＆＃13;

但是由于某种原因，这似乎没有解决问题，所以让我们玩转换功能添加一些javascript来修复高度：

＆＃13;

//JavaScript
var scale = 3;
var scaled = document.getElementById("scaled");
var container = document.getElementById("container");
container.style.height = //set the height of the container to
  container.clientHeight + //the old container height including the unscaled div
  (scale-1)*scaled.clientHeight + //add to that 2 more of the unscaled div
  (scale+scale/2|0) + //a kind of magic buffer to acount for border |0 converts to int
  "px";// make it css readable in pixls

＆＃13;

/*CSS*/
#container {
  border: 1px solid red;
  /*height: 86px; tweakable magic number if not using JavaScript*/
}
#scaled {
  border: 1px dashed blue;
  transform: scale(3,3);
  transform-origin: 0 0;
  width: 33%
}

＆＃13;

<div id="container">
 container
  <div id="scaled">
    scaled 3x
  </div>
</div>
<script>
  //insert JavaScript here
</script>

＆＃13;

正如我在代码中指出的那样，您可以通过更改css中的高度来手动执行此操作，但如果您愿意使用JavaScript，则此解决方案应该是有效的，并且每次添加内容时都不需要更改。

Answer 3

其他答案已经解释了为什么这需要 JS。这是一种隐藏转换后剩余的“额外”空间的方法。

假设您想要 50% 的缩放
您已在商品上设置了 transform: scale(.5); transform-origin: 0 0。
如果您知道要调整大小的项目的原始尺寸，则可以通过将宽度和高度乘以缩放因子来计算其新尺寸。
在父 div 上设置这些新尺寸，以便页面上的所有其他内容都可以围绕它流动。

如果您不知道元素的大小，您可以使用 ResizeObserver 找到它（它将是未缩放的大小），然后将缩放因子乘以宽度/高度并将这些新值设置为父包装 div。

如何将HTML父元素的边界框适合CSS转换后的子元素？

3 个答案: