css快速剪切图片的方法和clip属性介绍

很多blog网站文章摘要设置有有缩略图时，往往因为缩略图是提取文章内的图片，而导致缩略图不是太小就是太大，最终导致页面的不美观。其实有时我们想要展示的只是图片的一部分。所以今天我们讲讲讲利用css将大图快速剪裁成文章缩略图。

方法1——使用margin负边距

这种方法的原理是利用图片的四个面：上，左，下，右的值控制图片显示的区域，设置overflow:hidden 隐藏多余的面积。margin值越大图片的显示面积也就越小（如果想控制图片显示的大小的话，img加上宽高即可）。原理如下图：

img

利用负值控制图片显示区域大小原理图

.margin-clip{
    float:left; /*必须*/
    width:150px;
    height:90px;
    overflow:hidden;
    border:1px solid #ccc;
}
.margin-clip img{
    margin:-20px -15px -40px -55px;
}

利用负值控制图片显示区域大小的css代码

<div class="clip"><img src="clip.jpg" alt="" /></div> 

利用负值控制图片显示区域大小的html代码 运行

方法2——使用绝对定位

利用position道理跟利用margin负值差不多。原理如下图：

使用绝对定位控制图片显示区域大小原理图

代码接上

.clip{
	overflow:hidden;
	position:relative;
	border:1px solid #ccc;
	width:150px;
	height:90px;
	}
.clip img{
	position:absolute;
	top:-20px;
	left:-55px;
	}

使用绝对定位控制图片显示区域大小的css代码

<div class="clip"><img src="img.jpg" alt="" /></div> 

使用绝对定位控制图片显示区域大小的html代码 运行

方法3——使用css的clip属性

我们先来了解下 clip ：它唯一合法的形状是rect（矩形），其值是：rect (top, right, bottom, left)，（默认值是auto，不用任何剪裁）。clip必须有position:absolute;，才有效。,而矩形展示区域的大小计算则是
top值减bottom等于矩形展示区域的高,right值减left值等于矩形展示区域的宽 。最后将clip剪切完之后的图片定位到父元素的左上角。原理如下图：

使用绝对定位控制图片显示区域大小原理图

代码接上

    .clip{
            position:relative;
            width:150px;
            height:90px;
            border:1px solid #ccc;
        }
        .clip img{
            position:absolute;
            top:-20px;
            left:-55px;
            clip:rect(20px 205px 110px 55px);
        }

使用css的 Clip控制图片显示区域大小的css代码 运行

<div class="clip"><img alt="" src="clip.jpg"></div>

使用css的 clip控制图片显示区域大小的html代码

看完这三种方法之后，可能之前有想到过这集中方法，只是有一些注意点。其实说白了就是css灵活转换。其实我们可以用这三种方法来做CSS Sprite，只是没background-position计算方便，而且增加了css代码量，貌似用上面方法可以解决 IE6png滤镜解决方案 不支持CSS Sprite这个问题。