JQuery按原比例显示图片中部最大方形区域

JQuery按原比例显示图片中部最大方形区域

显示图片的区域是固定大小，而图片却有大有小而且长宽比例也不同，

如果直接设置图片大小会导致图片的比例不协调，图片会非常难看。

下面用JQuery实现按原比例只显示图片中部最大的方形区域，让图片

显示不会比例失调，而且大小也固定。

JavaScript代码：

$(document).ready(function(e) {
var size = 100;//正方形容器的大小
//设置正方形容器的位置为相对定位，溢出内容隐藏
$(".contain").css("position","relative").css("overflow","hidden");
$(".contain").width(size).height(size);//设置容器的大小
$("img").each(function() {
var width = $(this).width();
var height = $(this).height();
var _size = width;
if(width>height){
_size = height;//得到最小的边长
}
//按比例将得到图片缩小后的长宽
var scaling = _size/size;
height = height/(scaling);
width = width/(scaling);
var top = (height - size)/-2;
//得到图片在正方形容器中的偏移位置
var left = (width - size)/-2;
$(this).width(width).height(height);//设置图片的大小
$(this).css("position","absolute");//设置图片为绝对定位
//设置图片相对容器的位置
$(this).css("top",top+"px").css("left",left+"px");
});
});

HTML代码：

<div class="contain">
<img src="images/2043d0.jpg"/>
</div>
<div class="contain">
<img src="images/1504444.jpg"/>
</div>
<div class="contain">
<img src="images/bg.jpg"/>
</div>

效果图：