使用CSS"Clip"属性对图片进行裁剪

这是一个非常实用的CSS属性,且IE6也支持!用于缩放成不同比例的小图片时非常简单,而不需要多余的<div></div>做为容器来装载图片
clip(剪辑)属性就像一个蒙版。它允许你掩盖矩形的可见区域。要剪辑一个元素:你必须指position:absolute。然后,指定top rightbottom left值相对于元素的距离。

图片裁剪实例
下面的示例演示如何使用clip属性。首先,指定<div>position:relative下一步,指定<img>position:absolute

.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}

调整并剪辑图像
把图像缩小50%并剪辑成图形。用的width和height属性来调整图像和clip属性。并把图像向左偏移15px.

.gallery li {
float: left;
margin: 0 10px 0 0;
position: relative;
width: 70px;
height: 70px;
border: solid 1px #000;
}
.gallery img {
width: 100px;
height: 70px;
position: absolute;
clip: rect(0 85px 70px 15px);
left: -15px;
}
文章附属文件

文件名称: 20180105115238357402.gif

文件大小:6.46 KB

文件签名:3141B014813253934E6375DF912A5B7220D3881D

文件名称: 20180105115238956737.gif

文件大小:12.2 KB

文件签名:450A016E53F73883657831EEC6272886207CAEC8

文件名称: 20180105115238435402.gif

文件大小:36.47 KB

文件签名:70ABAE766F7BD1CBDA9D5959DE87ED083F24C0D1

评论列表

此文章还没有评论。