☆用代码裁剪图片

效果：

图片的上部裁剪了120px，下部裁剪了125px，左边裁剪了170px，右边裁剪了200px。

点击观看“原图片”

裁剪了图片的地方，可以放置其它内容。呵呵！你看看，这两边不是放置了文字了吗！上面我再放置一个文章的标题，再放置两个小图片。

用代码裁剪图片

“春天没来”编撰

2013年9月14日于北京

代码：

<table style="left: 0px; top: 0px; width: 750px; height: 1125px; position: relative;" id="table1" border="0" cellSpacing="0" cellPadding="0" background="http://image52.360doc.com/DownloadImg/2012/06/0415/24605894_3.jpg">

<tbody>

<tr>

<td>

<img style="left: 0px; top: 0px; position: absolute; cliptop: 120px; clipright: 550px; clipbottom: 1100px; clipleft: 170px;" alt="" src="http://image63.360doc.com/DownloadImg/2013/08/0606/34298948_1.jpg">

</td></tr></tbody></table>

代码简析：css的clip 属性：剪裁绝对定位元素。

当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。

clip 属性：用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

auto：默认值。不应用任何剪裁。

设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left) inherit：规定应该从父元素继承 clip 属性的值。JavaScript 语法：object.style.clip="rect(0px,50px,50px,0px)"

应用注释：cliptop: 200px; 指裁剪图片的上部200px；clipright: 650px; 指图片从左向右显示650px；clipbottom: 553px; 指图片从上向下显示553px；clipleft: 200px;指裁剪图片的左部200px。

要裁剪图片的上部，应用cliptop: 200px，属值自由定；要裁剪图片的左部，应用clipleft: 200px，属值自由定；要裁剪图片的下部，应用clipbottom: 553px，属值比图片的高度小多少px就会裁剪多少px ；要裁剪图片的右部，应用clipright: 200px，属值比图片的宽度小多少px就会裁剪多少px 。

“春天没来”编撰

2013年9月14日于北京