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));
        }
    });
});