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

发布时间：2020-12-14 21:34:56 所属栏目：资源来源：网络整理

导读：我有一个图像有一些CSS：width：100％; 现在的图像高达560px，但是我只想选择300像素的图像，切断图像的顶部和底部，而不会挤压图像。有可能做到吗？我看过作物，但你必须选择这些部分，所以当试图获得中间时，它将不起作用。解决方法尝试这个。这是使

我有一个图像有一些CSS：width：100％;

现在的图像高达560px，但是我只想选择300像素的图像，切断图像的顶部和底部，而不会挤压图像。

有可能做到吗？

我看过作物，但你必须选择这些部分，所以当试图获得中间时，它将不起作用。

解决方法

尝试这个。
这是使用“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中不起作用。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!