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

【问题标题】：CSS clipped image inside static container positioned absolute to grandparent静态容器内的 CSS 剪辑图像绝对定位到祖父母
【发布时间】：2020-12-16 18:34:03
【问题描述】：

我有多个图像图块，最后应该显示完整图像。在下面的代码中，您有望了解我想要实现的目标。我有一个祖父母 div，它总是被左右图像隐藏。现在我用父容器 div（“父”）包装图像以设置图块的大小。我现在的问题是“溢出：隐藏”仅在我将父级设置为“位置：相对”时才有效。但是为了将图像绝对定位到祖父母，父母的相对定位干扰了我的计划。你有什么想法我能做到这一点吗？如果这在 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>

【问题讨论】：

标签： javascript html css css-position

【解决方案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>

【讨论】：