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这个问题。

本文源链接:http://www.html5jscss.com/img-clip.html

转载请注明《css快速剪切图片的方法和clip属性介绍》| html5jscss

评论关闭了.