当仅更改宽度或高度时，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 高度和宽度，通过计算另一个来保持正确的宽高比。

PS 剖析您的代码，这有点奇怪，因为您实际上加载了同一图像的两个副本。我不知道为什么你不只使用一张图像及其 .load() 处理程序。