jQuery，缩放和调整图像大小

Question

我正在尝试使用overflow:hidden 198px的方形div缩放图像

魔术类指的是img

$('.magic').on('load', function(){
    var self = $(this);
    var width = self.width();
    var height = self.height();
    if(width>height){
        self.css('height', '198px');
        self.css('width', 'auto');
    }
    else{
        self.css('width', '198px');
        self.css('height', 'auto');
    }
});

现在， img正在填充div并且不会变得更大。

与在风景中一样，照片不是完美缩放，而是拉伸。

Answer 1

参见小提琴： http : //jsfiddle.net/powtac/VcLKL/19/

$(document).ready(function() {
    $(".magic").each(function(){
        var self = $(this);
        var width = self.width();
        var height = self.height();

        if(width > height){
            self.css('height', '198px');
            var ratio = width / height;
            self.css('width', 198 * ratio);
            self.css('margin-left', ((198 - parseInt(self.css('width')))/2));
        }
        else{
            self.css('width', '198px');
            var ratio = height / width;
            self.css('height', 198 * ratio);
            self.css('margin-top', ((198 - parseInt(self.css('height')))/2));
        }
    });
});