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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;