html - 使用 CSS 仅选择图像的中间部分

Question

我有一张包含一些 CSS 的图片:width:100%;

现在图像的高度约为 560px，但我希望只选择图像的 300px，切掉图像的顶部和底部而不压扁它。

这有可能吗？

我查看了crop，但您必须选择部分才能执行此操作，因此在尝试仅获取中间部分时它不会起作用。

Answer 1

试试这个。 这是使用“clip-path”CSS 值。 @Sam Jacob 的帖子中提到了这一点。

<style>
.clip-me {  
  position: absolute;
  clip: rect(110px, 160px, 170px, 60px); 
  /* values describe a top/left point and bottom/right point */

  clip-path: inset(10px 20px 30px 40px); /* or "none" */
  /* values are from-top, from-right, from-bottom, from-left */

} 
</style>
<img class="clip-me" src="thing-to-be-clipped.png">

注意:此 CSS 属性不在 IE 中起作用。