Question

I have the following code for a tooltip – it works perfectly in Fx

http://jsfiddle.net/mplungjan/jkCKh/ (the image used is for demo purposes)

The aim of the code is to not have anything wider or taller than 150 pixels and have it show the original size when mousing over.

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");
 });

How do I reduce the size identically in most browsers while keeping the aspect ratio?

If the ratio is actually needed to be calculated, please help me by posting an elegant calculation.

Answer 1

Try setting the height and width using CSS like this:

actualImage.css("height", 150).

not using the height and width attribute of the img tag. Setting only one of the height or width with CSS should scale the image proportionally. If you have no height and width attributes set on the img tag and you have only one of a height or width set with CSS, then the image will scale proportionally in IE.

I can get your code to work if I specifically remove the height and width attributes from the image and change your height and width settings to use CSS like this:

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");
 });

You can see it work in IE here: http://jsfiddle.net/jfriend00/jkCKh/7/.

FYI, it’s also possible to just set both CSS height and width, calculating one from the other to maintain the proper aspect ratio.

P.S. Dissecting your code, it is a bit bizarre as your essentially loading two copies of the same image. I’m not sure why you don’t just use one image with it’s .load() handler.