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