css 剪辑图片_CSS 截取图片只显示部分图片

在页面中需要在某个位置显示固定长宽的正方形图片，图片中有接近正方形比例但不是正方形，用PHP生成裁剪后的缩略图显然不合适，经过研究发现用CSS可以完美切割图片，经过测试Chrome，FF，IE6-9没问题。css有一个clip属性可以剪切对象，对象position必须为absolute。两张图分别为裁剪前和裁剪后的效果。

这个只是高度大于宽度的情况，如果这一批图片中还有一些宽度大于高度裁剪起来就会有些麻烦，不过经过试验已经完美解决，原理很简单，通过js在图片刚刚开始加载的时刻可以获取其宽度和高度，然后用js决定限制图片的高度还是宽度。如何在图片开始加载时获取大小可以在这里找到。

$(function(){

$('div.icon img').each(function(){

var $this=$(this);

imgReady($this.attr('src'),function(){

if(this.width>this.height){

$this.attr('height','100');