clip-path 占用整个图像 space？

Question

我试图只显示图像的一部分，但当我只想显示我正在显示的部分的高度时，它会在我的框内占据整个图像的高度。

在我下面的示例代码中，请注意图像后面显示的浅蓝色背景。
我该如何防止这种情况？

span {
  float: left;
  background-color: lightblue;
}
img {
  clip-path: polygon(0 0, 100% 0, 100% 64%, 0 64%);
}

<span>
  <img src="//via.placeholder.com/350x150">
</span>

Answer 1

将 clip-path 应用于跨度但请注意 clip-path 不会删除 non-visible 部分。

span {
  float: left;
  background-color: lightblue;
  clip-path: polygon(0 0, 100% 0, 100% 64%, 0 64%);
}
p {
 clear:both;
}

<span>
  <img src="//via.placeholder.com/350x150">
</span>
<p>some text here</p>

您可以通过在跨度上使用固定高度并设置 overflow:hidden 来避免 clip-path，在这种情况下，您将删除 non-needed 部分：

span {
  float: left;
  background-color: lightblue;
  height:100px;
  overflow:hidden;
}
p {
  clear:both;
}

<span>
  <img src="//via.placeholder.com/350x150">
</span>
<p>some text here</p>

另一个想法是也使用图像作为背景：

span {
  float: left;
  background-color: lightblue;
  height:100px;
  width:350px;
}
p {
  clear:both;
}

<span style="background-image:url(//via.placeholder.com/350x150)">
</span>
<p>some text here</p>

clip-path takes up space for the whole image?