clip:rect(top right bottom left);依据上-右-下-左的顺序提供自图片左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换.
矩形剪裁 还需要绝对定位position:absolute;这个clip有点像background-position这个属性，经常用css雪碧图都会知道。
下面就把我测试的代码方式：不能保证每张图片大小都一样，写的一个小方法，让裁切居中吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{margin: 0;padding: 0;}
.a{
2px;height: 300px;
background: #000;
position: absolute;z-index: 2
}
.b{
position: absolute;z-index: 3;
height: 2px; 600px;
background: #000;
}
</style>
<script src="jquery-1.11.1.min.js"></script>
<body>
<img id="i" src="01.jpg" alt="" width= "300 " height= "300 " style="position: absolute;top:0;left:0;">
<div class="a"></div>
<div class="b"></div>
<script>
var h=$("#i").outerHeight();
var w=$("#i").outerWidth();
var box=100;
$(".a").css("margin-left",w/2)
$(".b").css("margin-top",h/2)
var h1=(h/2)-box,
w1=(w/2)+box,
h2=(h/2)+box,
w2=(w/2)-box;
$("#i").css("clip","rect("+h1+"px,"+w1+"px,"+h2+"px,"+w2+"px)");
</script>
</body>