clip-path占用整个图像的空间？

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不会移除不可见的部分。

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>

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

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>