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到跨度但请注意，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>