如何删除`clip-path`的不可见部分？

Question

我想剪掉尺寸各异50％的图像。

所以我考虑使用clip-path属性的inset方法。但是，在这个属性中，切出的空间仍然是高度。

.container {
  display: flex;
  align-items: start;
}

.img {
  flex: 1;
  background: #900;
}

.img+.img {
  margin-left: 5px;
}

img {
  max-width: 100%;
  width: 100%;
  clip-path: inset(0 0 45% 0);
}

<div class="container">
  <div class="img">
    <img src="https://via.placeholder.com/300x550/009/fff.png" alt>
  </div>
  <div class="img">
    <img src="https://via.placeholder.com/200x200/090/fff.png" alt>
  </div>
  <div class="img">
    <img src="https://via.placeholder.com/600x150/09f/fff.png" alt>
  </div>
</div>

所以我用overflow: hidden和height编辑源代码如下：

.container {
  display: flex;
  align-items: start;
  height: 100vh;
}

.img {
  flex: 1;
  background: #900;
  height: 45%;
  overflow: hidden;
}

.img+.img {
  margin-left: 5px;
}

img {
  max-width: 100%;
  width: 100%;
}

<div class="container">
  <div class="img">
    <img src="https://via.placeholder.com/300x550/009/fff.png" alt>
  </div>
  <div class="img">
    <img src="https://via.placeholder.com/200x200/090/fff.png" alt>
  </div>
  <div class="img">
    <img src="https://via.placeholder.com/600x150/09f/fff.png" alt>
  </div>
</div>

但是，它将是父容器高度的45％，而不是图像高度的45％。

为什么会这样？如何减少每个图像50％的高度并消除额外的空间？

Answer 1

百分比高度相对于父元素，在这种情况下，您将面临复杂的行为，其中45%是定义父高度的最高图像的高度。

获得所需内容的一个想法是考虑缩放两次缩放图像的位置，然后将容器缩小两次：

.container {
  display: flex;
  align-items: start;
  height: 100vh;
}

.img {
  flex: 1;
  background: #900;
  overflow: hidden;
  transform:scaleY(0.5);
  transform-origin:top;
}

.img+.img {
  margin-left: 5px;
}

img {
  max-width: 100%;
  width: 100%;
  transform:scaleY(2);
  transform-origin:top;
}

<div class="container">
  <div class="img">
    <img src="https://via.placeholder.com/300x550/009/fff.png" alt>
  </div>
  <div class="img">
    <img src="https://via.placeholder.com/200x200/090/fff.png" alt>
  </div>
  <div class="img">
    <img src="https://via.placeholder.com/600x150/09f/fff.png" alt>
  </div>
</div>

Answer 2

有趣的挑战。

下面的方法具有将每个图像裁剪为仅其顶部高度的外观，但是它要求包含每个图像的帧仍然是全高。

请注意，为了清楚起见，我将你所谓的div.imgs重命名为div.frames。

.container {
  display: flex;
  align-items: start;
  height: 100vh;
}

.frame {
  flex: 1;
  background: lightgrey; /* set transparent to make frames invisible */
  position: relative;
}

img {
  display: block; /* default is inline-block, which adds extra space */
}

.frame + .frame {
  margin-left: 5px;
}

.frame > img {
  /* this image expands the .frame to fit full image size */
  height: auto;
  width: 100%;
  visibility: hidden;
}

.cropper {
  /* with parent .frame set to full image hight, 50% of .frame height is 50% of image hight */
  position: absolute;
  height: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.cropper img {
  /* inside the cropper, display the normal image—it'll overflow at 50% of its height */
  width: 100%;
}

<div class="container">
  <div class="frame">
    <img src="https://via.placeholder.com/300x550/009/fff.png" alt>
    <div class="cropper">
      <img src="https://via.placeholder.com/300x550/009/fff.png" alt>
    </div>
  </div>
  <div class="frame">
    <img src="https://via.placeholder.com/200x200/090/fff.png" alt>
    <div class="cropper">
      <img src="https://via.placeholder.com/200x200/090/fff.png" alt>
    </div>
  </div>
  <div class="frame">
    <img src="https://via.placeholder.com/600x150/09f/fff.png" alt>
    <div class="cropper">
      <img src="https://via.placeholder.com/600x150/09f/fff.png" alt>
    </div>
  </div>
</div>

它的工作原理是在每个div.frame中放置一个全高，不可见的图像。这会从内部“扩展”每个div.frame以匹配图像的整个高度。然后每个div.frame还包含一个absolultey定位的div.cropper，设置为其父容器高度的50％。因为我们的隐形图像将我们的div.frame设置为图像的高度，所以这是图像高度的50％，即使它的比例也是如此。最后，.cropper再次包含我们的图像。因为.cropper设置为overflow: hidden，所以只显示图像的前50％。

我把.frames灰色涂上颜色来说明发生了什么。如果你不希望.frames可见，你可以简单地设置他们的background-color: transparent（或者不指定background-color-transparent是默认值）。

您可以使用<img>削减background-image元素并达到相同的效果，但我还没有扭曲这种方法恰到好处地找到不需要.frames保持全高度同时其内容被“切碎”的方法。