html - 剪辑路径占用整个图像的空间？

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 应用于 span 但请注意，clip-path 不会删除 不可见部分。

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，在这种情况下，您将删除不需要的部分:

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>