javascript - jQuery，缩放和调整图像大小

Question

我正在尝试使图像在大小为 198px 的方形 div 中缩放overflow:hidden

魔术类是指一个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));
        }
    });
});