如何删除“剪切路径”的不可见部分？

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.img重命名为div.frame。

.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然后还都包含一个绝对位置的div.cropper，设置为其父容器高度的50％。因为我们的不可见图像将div.frame设置为图像的高度，所以即使缩放，该 仍是图像高度的50％。最后，.cropper再次包含我们的图像。由于.cropper设置为overflow: hidden，因此仅显示图像的前50％。

我将.frames涂成灰色以说明正在发生的情况。如果您不希望.frame可见，则可以简单地设置它们的background-color: transparent（或不指定background-color-transparent是默认值）。

您也许可以减少<img>元素并使用background-image达到相同的效果，但是我还没有扭转这种方法，只是找到了不会的方法要求.frame保持其内容被“切碎”时保持全高。