如何让填充在缩放变换中缩放？答案

【问题标题】：How do I get the padding to scale in a scaling transform?如何让填充在缩放变换中缩放？
【发布时间】：2018-02-16 21:40:57
【问题描述】：

我正在做一个缩放变换。缩放原点水平居中。当我缩放元素时，垂直填充似乎被缩放，但水平填充没有被缩放。如何使水平填充也可以缩放？

.inner {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background-color: #f99;
  transform: scale(1.5);
  transform-origin: top center;
  box-sizing: border-box;
  padding: 20px;
}

.inner2 {
  background-color: #99f;
  height: 260px;
}

.outer {
  background-color: #ccc;
}

<div class="outer">
  <div class="inner">
    <div class="inner2">
    </div>
  </div>
</div>

另一个问题是关于 Chrome 开发工具的。 Chrome 开发工具未反映缩放变换后更改的计算属性。（例如，检查器中的宽度仍然不变）。

我的另一个问题是内部元素超出了外部元素。缩放变换后如何让外部元素包含内部元素？

更新：我不小心为内部元素添加了边框。在注意到@Stickers 的答案后，我删除了边框。现在，很容易观察到水平填充没有缩放，而垂直填充似乎被缩放了。

更新：codepen 具有更大的填充，显示垂直填充被缩放，而水平填充没有。

【问题讨论】：

看起来只有底部的填充没有缩放。这是由于内部高度为 300px。一切都被缩放了，但你的盒子只有 300px 高，20px 填充，内部元素是 260。这在未缩放时有效，但是当缩放时，底部填充被 300px 盒子切断

标签： css css-transforms

【解决方案1】：

.inner 元素设置了box-sizing: border-box;，它告诉浏览器在您为宽度和高度指定的值中考虑任何边框和填充。

如果我们计算300-20x2-2x2=256 (height-paddingx2-borderx2)，那么.inner2 应该有height: 256px 而不是height: 260px;，如果你想完全适应的话。修复后，所有填充值都会正确缩放。

有关.outer 元素的大小，请阅读规范：

3. The Transform Rendering Model

注意：转换确实会影响视觉呈现，但除了影响溢出之外，对 CSS 布局没有影响...

我认为这也回答了 DevTools 问题。

【讨论】：