Question

我正在进行缩放转换。缩放原点水平居中。当我缩放元素时，垂直填充似乎会缩放，但水平填充不会缩放。如何使水平填充也按比例缩放？

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

另一个问题是使用Chrome开发工具。 Chrome扩展工具在缩放转换后未反映更改的计算属性。（例如，检查员的宽度仍未改变。）

我的另一个问题是内部元素延伸到外部元素之外。在缩放变换后，如何让外部元素包含内部元素？

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

更新：codepen具有更大的填充，表示垂直填充是缩放的，而水平填充则不是。

Answer 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的问题。

如何在缩放变换中缩放填充？

1 个答案: