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标签的height和width属性。使用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（）处理程序的图像。

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

1 个答案: