在网站设计中，有时候会遇到对一张图片做多处使用，而每处显示的尺寸又不一定都一样，在传统作法中，需要根据不同尺寸
设计不同的图片。不过利用css，能够很好解决这个问题。
一、直接设置图片的width，height，或者直接改变图片的长宽比例
虽然简单方便，但是会引起图像显示效果问题。因为浏览器不能像ps那样对图像以相对尺寸进行缩放运算，实际显示虽然简单方便，但是会引起图像显示效果问题。因为浏览器不能像ps那样对图像以相对尺寸进行缩放运算，实际显示时图像会出现像素位移的状况。
二、使用clip剪切
CSS对许多对象提供专门用于对象剪切的样式属性——clip，可用clip属性来处理对象最终的显示内容。
clip 设置对象的可视区域。只对绝对定位的对象有效，应用此属性时，对象必须使用position：absolute
可用值：auto， rect（number，number，number，number）
使用clip属性进行对象剪切时，必须给的4个数值。使用方法如下
clip：rect（number1，number2，number3，number4）；
number1~number4分别代表上、右、下、左4个边，相对与左上角坐标（0,0）的偏移值。
（这点与margin四个数值代表边的顺序相同，不同的margin的四个值都是相对于自身内容的四边的偏移）
三、使用div强制剪切
使用overflow：hidden；的对象将强制不显示对象中超过对象范围的部分内容
定义clip 属性设置元素的形状。
当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。
继承性：No
说明
这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。
JavaScript 语法
CSS 属性也可通过一段 JavaScript 被动态地改变。
脚本语法：
object.style.clip="rect(0px,50px,50px,0px)"在我们的 HTML DOM 教程中，您可以找到更多有关 clip 属性 的细节。
在我们的 HTML DOM 教程中，您也可以找到完整的 Style 对象参考手册。
例子
img
{
clip: rect(10px, 5px, 10px, 5px)
}
值 描述
shape 设置元素的形状。合法的形状值是：rect (top, right, bottom, left)
auto 默认。浏览器可设置元素的形状。
