CSS 静态容器内的剪辑图像绝对定位于祖父母

Question

我有多个图像块，最终应该显示完整图像。在我下面的代码中，您有望了解我想要实现的目标。我有一个 grandparent div ，它将始终被左右图像隐藏。现在我用 parent 容器 div ("parent") 包裹图像来设置图块的大小。我现在的问题是“溢出：隐藏”只有在我将 parent 设置为“位置：相对”时才有效。但是为了将图像绝对定位到grandparent，parent的相对定位干扰了我的计划。你有什么想法我怎么能做到这一点？如果这在 CSS 中不可行，我也可以使用 JS。

.grandparent {
  display: flex;
  flex-direction: row;
  background-color: blue;
  width: 960px;
  height: 720px;
}

.parent {
  width: 100px;
  height: 125px;
  overflow: hidden;
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
}

<div class="grandparent">
  <div class="parent">
    <img class="child left" src="https://cdn.pixabay.com/photo/2013/07/25/13/01/stones-167089_960_720.jpg">
  </div>
  <div class="parent">
    <img class="child right" src="https://cdn.pixabay.com/photo/2013/07/25/13/01/stones-167089_960_720.jpg">
  </div>
</div>

Answer 1

不要使用 overflow:hidden，而是考虑使用 clip-path。它和溢出一样，你不需要考虑 position:relative

.grandparent {
  display: flex;
  flex-direction: row;
  background-color: blue;
  width: 960px;
  height: 720px;
  position: relative;
  overflow: hidden;
}

.parent {
  width: 100px;
  height: 125px;
  clip-path:inset(0); /* this will hide the overflow */
}

.child {
  position: absolute;
  top: 0;
  left: 0;
}

<div class="grandparent">
  <div class="parent">
    <img class="child left" src="https://cdn.pixabay.com/photo/2013/07/25/13/01/stones-167089_960_720.jpg">
  </div>
  <div class="parent">
    <img class="child right" src="https://cdn.pixabay.com/photo/2013/07/25/13/01/stones-167089_960_720.jpg">
  </div>
</div>

CSS 静态容器内的剪辑图像绝对定位于祖父母

CSS clipped image inside static container positioned absolute to grandparent

html

javascript

css

css-position