工作笔记：img的裁剪

最新推荐文章于 2024-11-13 11:16:45 发布

Belores

最新推荐文章于 2024-11-13 11:16:45 发布

阅读量4.2k

点赞数

分类专栏：工作笔记

本文链接：https://blog.csdn.net/u013032340/article/details/53695690

版权

工作笔记专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML中实现图像裁剪的方法，包括使用`background-position`调整显示区域以及利用`clip`属性定义可视区域。`clip`属性需配合`position: absolute`使用，其坐标计算以左上角为起点，现代浏览器对此提供了良好支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML：

<img class="noticeimg-left" src="images/20161118.jpg" alt="新闻图片" width="182">

CSS：

.noticeimg-left{
  clip: rect(0px 148px 103px 0px);
  position: absolute;
}

HTML：

<img class="noticeimg-right" src="images/20161118.jpg" alt="新闻图片">

CSS：

  .noticeimg-right{
    clip: rect(0px 579px 80px 0px);
    position: absolute;
    width: 456px;
  }

img只显示图片一部分或 css设置背景图片只显示图片指定区域

background-position: 100% 56%;

设置背景图片显示图片的哪个坐标区域，图片左上角为0，0或0%，0%，右下角为高度和宽度，或100%，100%。

clip:rect(0px 579px 80px 0px); 设置显示图片的某个区域，分别是上右下左的顺序设置。

clip属性说明：

检索或设置对象的可视区域。可视区域外的部分是透明的。
此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为 absolute ，此属性方可使用。

clip属性基础语法：
clip : auto 　 rect ( number number number number )

取值：
auto :　默认值。对象无剪切
rect ( number number number number ) :　依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用 auto 替换，即此边不剪切

注意事项:
一、clip属性必须和定位属性postion一起使用才能生效。
二、clip裁切的计算坐标都是以左上角即（0,0）点开始计算，这点不像padding和margin，它们两个的右边距和下边距是从最右边和最下边开始计算的。
　　

兼容性：现代浏览器都支持