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（）处理程序。