Jquery 当仅更改宽度或高度时，IE8不保持纵横比

我有下面的工具提示代码-它在Fx中非常有效

（使用的图像用于演示）

代码的目的是不让任何宽度或高度超过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");
 });

var imgUrl=”http://c487397.r97.cf2.rackcdn.com/wp-content/uploads/2011/09/TallCat.jpg";
var-idx=1；
var imageObject=$（'150
如果（w150）实际图像属性（“宽度”，150）；
否则，如果（w>h&&h>150）实现图像属性（“高度”，150）；
$（'.qTip2Image'）。追加（实现图像）；
}).attr（“src”，imgUrl）；
var cont_左；
$（“img.thumb”）
.live（“mouseenter”，function（）{
//保存此缩小的图像大小以备以后使用
$（this.data（“newSize”，{width:this.width，height:this.height}）
$（此）。设置动画({
宽度：$（此）.data（“orgSize”）.width，
高度：$（此）.data（“orgSize”）.height，
左：“-=50”，
顶部：“-=50”
}“快”）；
})
.live（“mouseleave”，函数（）{
$（此）。设置动画({
宽度：$（this）.data（“newSize”）.width，
高度：$（this）.data（“newSize”）.height，
左：“+=50”，
顶部：“+=50”
}“快”）；
});

在大多数浏览器中，如何在保持纵横比的同时减少相同的大小

---

如果实际需要计算比率，请帮助我发布一个优雅的计算。

尝试使用CSS设置高度和宽度，如下所示：

actualImage.css("height", 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")
    .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");
 });

不使用img标记的高度和宽度属性。使用CSS仅设置一个高度或宽度应按比例缩放图像。如果img标签上没有设置高度和宽度属性，并且只有一个高度或宽度设置为CSS，那么图像将在IE中按比例缩放

如果我专门从图像中删除高度和宽度属性，并更改高度和宽度设置以使用CSS，我可以让您的代码正常工作，如下所示：

actualImage.css("height", 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")
    .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");
 });

var imgUrl=”http://c487397.r97.cf2.rackcdn.com/wp-content/uploads/2011/09/TallCat.jpg";
var-idx=1；
var imageObject=$（'150
如果（w150）实现图像css（“宽度”，150）；
否则，如果（w>h&&h>150）实现mage.css（“高度”，150）；
$（'.qTip2Image'）。追加（实现图像）；
}).attr（“src”，imgUrl）；
var cont_左；
$（“img.thumb”）
.live（“mouseenter”，function（）{
//保存此缩小的图像大小以备以后使用
$（this.data（“newSize”，{width:this.width，height:this.height}）
$（此）。设置动画({
宽度：$（此）.data（“orgSize”）.width，
高度：$（此）.data（“orgSize”）.height，
左：“-=50”，
顶部：“-=50”
}“快”）；
})
.live（“mouseleave”，函数（）{
$（此）。设置动画({
宽度：$（this）.data（“newSize”）.width，
高度：$（this）.data（“newSize”）.height，
左：“+=50”，
顶部：“+=50”
}“快”）；
});

您可以在IE中看到它的工作方式：

仅供参考，也可以同时设置CSS的高度和宽度，从一个计算另一个以保持适当的纵横比

---

另外，仔细分析你的代码，这有点奇怪，因为你实际上加载了同一个图像的两个副本。我不知道为什么不将一个图像与.load（）处理程序一起使用。

谢谢您的回答。代码是一个片段。我将图像加载到内存中。在我的实际代码中，我看到它是否失败，以便可以加载另一个图像。在将调整大小的图像附加到容器之前，我还获得了实际大小。为什么在创建刚刚测试的图像时需要.removeAttr（“高度”）.removeAttr（“宽度”）。必须删除这些属性。谢谢