温故而知新 css+js 自动裁剪图片指定高度/宽度

css中有一个属性叫做clip,用于修剪裁剪.配合其属性关键字rect可以实现元素的矩形裁剪效果.
top right bottom left 分别指最终裁剪可见区域的上边,右边,下边,左边.而所有的数值都表示位置,且是相对于原始元素的左上角而言的

注意：clip:rect矩形剪裁只能作用于position:absolute的元素上。 

rect(60px 200px 280px 40px)
表示的含义就是：

top 60px 由上向下共裁剪图片60像素

right 200px 由右向左裁剪至图片宽度为200像素  将图片原本宽度 200px（以原图片左边缘计算） 以外 的内容裁剪掉

bottom 280px 由下向上裁剪至图片高度为100像素 将图片原本高度 280px（以原图片上边缘计算） 以下 的内容裁剪掉

left 40px 由左向右共裁剪图片40像素

以某联赛图片为例 裁剪前图片 640 × 447 px

 裁剪后

注意：clip:rect矩形剪裁只能作用于position:absolute的元素上。 

由于clip属性与图片本身高度宽度有关 所以如果想要实现自动裁剪 这个时候我们需要用到js函数

因时间已到深夜后面的有缘再补上