让页面上图片不变形

很多列表图片的原图超过指定大小，然而图片本身高宽比例不是固定的，因此在设置此类情况时最好的处理方式是使用js来固定图片大小并保证图片居中，且让图片不变形。

js代码：

/******************************************************************/
/******将图片居中，在图片外面嵌套一个div不设置任何样式*************/
/******参数：图片最大宽度，图片最大高度,******/
/******调用方法：$('.class').centerImage({MaxWidth:190,MaxHeight:135})*************/
/******************************************************************/
(function ($) {
    $.fn.centerImage = function (options) {
        var opts = $.extend({}, {
            MaxWidth: 190, MaxHeight: 135
        }, options);
        var img = new Image(); //创建一个Image对象，实现图片的预下载
        img.src = $(this).attr('src');
        var oldImg = $(this);
        if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
            SetImageCenter(img, oldImg, opts);
            return; // 直接返回，不用再处理onload事件
        } else {
            img.onload = function () { //图片下载完毕时异步调用callback函数。
                SetImageCenter(img, oldImg, opts); //将回调函数的this替换为Image对象
            };
        }
    }
    function SetImageCenter(img, imgold, opts) {
        var iwidth = opts.MaxWidth;
        var iheight = opts.MaxHeight;
        //设置图片的高宽
        if (img.width > 0 && img.height > 0) {
            if (img.width / img.height >= iwidth / iheight) {
                if (img.width > iwidth) {
                    imgold.css({  iwidth, height: (img.height * iwidth) / img.width });
                } else {
                    imgold.css({  img.width, height: img.height });
                }
            } else {
                if (img.height > iheight) {
                    imgold.css({  (img.width * iheight) / img.height, height: iheight });
                } else {
                    imgold.css({  img.width, height: img.height });
                }
            }
        }
        //设置图片外层div的margin-top和margin-left
        var div = imgold.parent(); //获取包含本图片的div
        if (imgold.height() < iheight) {
            var top = (iheight - imgold.height()) / 2;
            div.css('margin-top', top + 'px');
        }
        if (imgold.width() < iwidth) {
            var left = (iwidth - imgold.width()) / 2;
            div.css('margin-left', left + 'px');
        }
    }
})(jQuery);

需要使用jq1.7.2以上。

调用方式：

$("img[flag=img]").each(function (){
               $(this).centerImage({ MaxWidth: 190, MaxHeight: 135 });
           });

如果使用：$("img[flag=img]").centerImage({ MaxWidth: 190, MaxHeight: 135 });会导致页面上的图片变形，但图片整体大小会以用户设置的大小为准。