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().