教你如何利用css来裁剪图片

突然想到了之前整理的图片裁剪插件，想了下实现的三种原理，下面就写一下简单的例子：

• 由于只是简单说了下实现原理，网上也有很多插件，但是UI的设计不一，所以对于全面的实现效果并没有体现。

背景定位

利用背景定位来实现裁剪效果

代码块

css：

div{
	   width: 300px;
       height: 300px;
       overflow: hidden;
       border: 1px solid red;
       background: url("img/1.jpg") no-repeat 50px 50px;
       //前一个50px 是X轴方向，后一个50px为Y轴方向。利用背景定位看
       //起来做出裁剪效果。
   }

html：

<div></div>

效果：

clip切割

利用css属性clip来实现裁剪效果

代码块

css：

img{
      position:absolute;
      clip:rect(0px,60px,200px,0px);
      //里面的像素依次为图片的top、right、bottom、left，
      //单纯的把图片从top、right、bottom、left的像素位置开始裁剪.图片位置并没有变。
   }

html：

<img src="img/1.jpg" alt="">

效果：

position定位

利用css属性position来实现裁剪效果

代码块

css：

div{
       width: 200px;
       height:200px;
       position: relative;
       border: 1px solid red;
       overflow: hidden;
       //利用超出部分隐藏来展示想要的大小
   }
img{
       position:absolute;
       top: 50px;
       //利用定位，选择到需要的图片位置
   }

html：

<div>
    <img src="img/1.jpg" alt="">
</div>

效果：