有时候在前台需要展示图片的时候，发现图片的大小不一致，有的大，有的小。更恶心的是图片有的是竖着看的，有的是横着看的。

这个时候你如果给图片固定大小，要么图片会变形，要么有的图片会超出容器范围。最简单的方法就是写个js/jquery来自动适应图片的长宽，让图片能够在容器内正常显示。

下面提供一个很好的jquery方法，自适应图片在页面中显示的大小和位置：

function ImgPosInitMobs(obj) {
    //图片
    var img = $(obj);
    //图片存在则继续
    if (typeof obj.naturalWidth != "undefined") {
    	//图片真实宽度
        var realWidth = obj.naturalWidth;
        //图片真实高度
        var realHeight = obj.naturalHeight;
        //图片容器宽度
        var standwidth=$(obj).parent().parent().width();
        //图片容器高度
        var standheight=$(obj).parent().parent().height();
        //根据比例来算出图片的比例
        if (realWidth/realHeight > standwidth/standheight) {
            var realWidth1 =standwidth;
            var realHeight1=standwidth * realHeight / realWidth;
        }else {
            var realHeight1=standheight;
            var realWidth1=standheight * realWidth / realHeight;
        }
        //重新赋予图片宽高
        img.width(realWidth1);
        img.height(realHeight1);
        //图片距离容器的摆放位置
        img.css("margin-top", -(realHeight1 - standheight) / 2);
        img.css("margin-left", -(realWidth1 - standwidth) / 2);
    }
}

调用方法是在页面中图片添加个onload事件，如下

<img src="XXXXXXX" onload="ImgPosInitMobs(this)" />

通过如上的方法就可以使图片自适应div中的大小和摆放位置，非常实用的一个方法~