IE8不保留寬高比時僅寬度或高度改變

Question

我有一個工具提示下面的代碼 - 它完全在Fx的

http://jsfiddle.net/mplungjan/jkCKh/（所使用的圖像是用於演示目的）

的代碼的目標是沒有任何東西比150像素更寬或更高，並且在鼠標懸停時顯示原始大小。

var imgUrl = "http://c487397.r97.cf2.rackcdn.com/wp-content/uploads/2011/09/TallCat.jpg"; 
var idx=1; 
var imageObject = $('<img/>').load(function(){ 
    var w = this.width; 
    var h = this.height; 
    var orgSize = {width:w,height:h}; 
    var imgId = "thumb_"+idx; 
    var actualImage = $('<img/>') 
    .attr("id",imgId) 
    .attr("src",imgUrl) 
    .addClass("thumb") 
    .data("orgSize",orgSize); 

    // set EITHER width OR height if either is > 150 
    if (w<h && w>150) actualImage.attr("width",150); 
    else if (w>h && h > 150) actualImage.attr("height",150); 
    $('.qTip2Image').append(actualImage); 
}).attr("src",imgUrl); 


var cont_left; 
$("img.thumb") 
.live("mouseenter",function() { 
    // save this scaled down image size for later 
    $(this).data("newSize",{width:this.width,height:this.height}) 
    $(this).animate({ 
     width: $(this).data("orgSize").width, 
     height: $(this).data("orgSize").height, 
     left: "-=50", 
     top: "-=50" 
    }, "fast"); 
    }) 
.live("mouseleave",function() { 
    $(this).animate({ 
     width: $(this).data("newSize").width, 
     height: $(this).data("newSize").height, 
     left: "+=50", 
     top: "+=50" 
    }, "fast"); 
}); 

如何在保持寬高比的同時在大多數瀏覽器中以相同的方式縮小尺寸？

如果實際需要計算的比例，請發佈一個精美的計算來幫助我。

Answer 1

嘗試設置高度和使用CSS這樣的寬度：

actualImage.css("height", 150). 

不使用高度和img標籤的寬度屬性。用CSS設置高度或寬度中的一個應該按比例縮放圖像。如果在img標籤上沒有設置高度和寬度屬性，並且只有一個用CSS設置的高度或寬度，則圖像將在IE中按比例縮放。

我能得到你的代碼工作，如果我特意從圖像中刪除的高度和寬度屬性，並改變你的高度和寬度設置，使用CSS這樣的：

var imgUrl = "http://c487397.r97.cf2.rackcdn.com/wp-content/uploads/2011/09/TallCat.jpg"; 
var idx=1; 
var imageObject = $('<img/>').load(function(){ 
    var w = this.width; 
    var h = this.height; 
    var orgSize = {width:w,height:h}; 
    var imgId = "thumb_"+idx; 
    var actualImage = $('<img/>') 
    .attr("id",imgId) 
    .attr("src",imgUrl) 
    .addClass("thumb") 
    .removeAttr("height") 
    .removeAttr("width") 
    .data("orgSize",orgSize); 

    // set EITHER width OR height if either is > 150 
    if (w<h && w>150) actualImage.css("width",150); 
    else if (w>h && h > 150) actualImage.css("height",150); 
    $('.qTip2Image').append(actualImage); 
}).attr("src",imgUrl); 


var cont_left; 
$("img.thumb") 
.live("mouseenter",function() { 
    // save this scaled down image size for later 
    $(this).data("newSize",{width:this.width,height:this.height}) 
    $(this).animate({ 
     width: $(this).data("orgSize").width, 
     height: $(this).data("orgSize").height, 
     left: "-=50", 
     top: "-=50" 
    }, "fast"); 
    }) 
.live("mouseleave",function() { 
    $(this).animate({ 
     width: $(this).data("newSize").width, 
     height: $(this).data("newSize").height, 
     left: "+=50", 
     top: "+=50" 
    }, "fast"); 
}); 

你可以看到它在IE瀏覽器這裏：http://jsfiddle.net/jfriend00/jkCKh/7/。僅供設置CSS高度和寬度，從另一個計算一個以保持適當的高寬比。

P.S.解剖你的代碼，這是有點奇怪，因爲你基本上加載了兩個相同的圖像副本。我不知道你爲什麼不使用一個圖像與它的.load（）處理程序。