在子容器上使用 CSS 变换时如何手动设置父容器的溢出大小？

Question

我知道 CSS 转换不会影响元素的有效大小，只会影响其视觉呈现。以下帖子对此进行了讨论：

我还看到了以下没有完全讨论溢出距离的讨论：

How can I wrap a container around its css-transformed contents?
width/height after transform

我正在尝试将一个已缩放的元素包裹在另一个元素中，并将溢出设置为滚动。

问题是因为 CSS 缩放不影响元素的实际大小，只是它的视觉呈现滚动溢出被设置为元素的原始尺寸，要么太大要么太大小

是否有一种方法可以在父级上显式设置溢出距离来解决此问题？这可能允许我做一些事情，比如在父级上将溢出高度设置为 child height * scale 并将宽度设置为 child width * scale。

我希望实际缩放值会通过用户输入而改变，动态调整元素的大小。

下面是实际问题的示例片段。

.parent {
  overflow: scroll;
  height: 500px;
  width: 500px;
  background: black;
}
.child {
  background-image: url("https://i.redd.it/7ifkx5z39b631.jpg");
  transform: scale(0.25, 0.25);
  transform-origin: top left;
  height: 7000px;
  width: 4900px;
}

<div class="parent">
  <div class="child">
  </div>
</div>

Answer 1

好吧，您可以在容器内使用伪元素...

.parent:before {
     content: '';
     position: relative;
     z-index: -1;
     width: calc(4900px * 0.25);
     height: calc(7000px * 0.25);
}

应该强制溢出。我正在使用否定 z-index 以确保它不会与内容互动。

注意：如果缩放是动态的，那么实际创建一个空元素可能更容易（pseudo-classes 是 difficult to control 通过 JS），然后使用 [=36] 动态控制 height/width =].

<div class="parent">
  <div class="spacer"></div>
  <div class="child">
  </div>
</div>

和CSS

.spacer {
     content: '';
     position: relative;
     z-index: -1;
     width: calc(4900px * 0.25);
     height: calc(7000px * 0.25);
}

编辑： 哎呀才意识到你需要比原来的小。如果新溢出大于起始状态，则以上方法有效...

在这种特定情况下，您可能希望完全避免变换，而是缩放背景图像。然后使用您的 JS 函数缩放元素。在这种情况下，背景将缩放以适合其容器。

.child {
     background-image: url("https://i.redd.it/7ifkx5z39b631.jpg");
     background-size: contain;
     width: calc(4900px * 0.25);
     height: calc(7000px * 0.25)
}

在子容器上使用 CSS 变换时如何手动设置父容器的溢出大小？

How to manually set overflow size on parent container when using CSS transform on child?

html

javascript

css

overflow

css-transforms