IE8 не сохраняет соотношение сторон при изменении только ширины ИЛИ высоты - PullRequest
Новая
       1

IE8 не сохраняет соотношение сторон при изменении только ширины ИЛИ высоты

0 голосов
/ 19 сентября 2011

У меня есть следующий код для всплывающей подсказки - он отлично работает в 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");
 });

Как одинаково уменьшить размер в большинстве браузеров при сохранении соотношения сторон?

Если соотношение действительно необходимо рассчитать, помогите мне, опубликовав элегантный расчет.

1 Ответ

1 голос
/ 19 сентября 2011

Попробуйте установить высоту и ширину с помощью 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 ().

...