Fit images to viewport

Question

Мне нужно подогнать изображения к размеру окна просмотра/окна.

Я использую этот код для делать это:

$(".fittedImg").each(function() { 

     // I want to limit the size, and show a scrollbar on very small viewport 
     height = ($(window).height() < 725) ? 725 : $(window).height(); 
     width = ($(window).width() < 1150) ? 1150 : $(window).width(); 

     var newWidth, newHeight; 
     $(this) 
      .removeAttr("height") 
      .removeAttr("width"); // reset img size 

     // calculate dimension and keep it 
     if (($(this).width()/width) > ($(this).height()/height)) { 
      newHeight = height; 
      newWidth = height/($(this).height()/$(this).width()); 

     } else { 
      newHeight = width/($(this).width()/$(this).height()); 
      newWidth = width; 
     }; 
     $(this).stop(true, false).animate({ 
      "height": newHeight + "px", 
      "width": newWidth + "px" 
     }); 
}); 

Я завернула этот код в функции, которую я называю на изменение размеров, и на таких мероприятиях, как $ ('fittedImg.) Нагрузки() и $. ('.fittedImg'). готов().

Результат очень странный: В Chrome это нормально работает, но иногда изображения растягиваются при повторных обновлениях. В IE есть такая же проблема. Opera никогда не терпит неудачу, и сафари вообще игнорируют вычисления (когда-либо растягивающиеся).

Что случилось с моими расчетами и/или вызовами событий?

спасибо.

Answer 1

1. Убедитесь, что изображение полностью загружен перед извлечением ширина/высота
2. Не вынимайте ширина/высота атрибуты перед вычислением

Предполагая, что вы хотите, чтобы поместить изображение внутри вмещающего элемента (в этом случае window), вот несколько более простых вычислений, которые могут оказаться полезными. Концепция довольно проста, основываясь на содержащихся мерах и измерениях изображения, вычисляет соотношение. Затем умножьте его с первоначальными показателями:

$(".fittedImg").load(function(){ 

    var imgWidth = this.width, 
     imgHeight = this.height, 
     winWidth = $(window).height(), 
     winHeight = $(window).width(), 
     ratio = Math.min(winWidth/imgWidth, winHeight/imgHeight); 

    // if you don’t want it to upscale, use Math.min or Math.max on the ratio 

    $(this).stop(true, false).animate({ 
     height: imgHeight*ratio, 
     width: imgWidth*ratio 
    }); 
}); 

Пожалуйста, обратите внимание, что некоторые расширения, такие как AdBlock может испортить извлеченный ширина/высота от изображения. Вы можете использовать консоль и текст imgWidth/imgHeight, чтобы убедиться, что он доступен.

Также обратите внимание, что возможно, что ваше изображение уже загружено при добавлении этого события в зависимости от того, как вы размещаете свой код. В этом случае вы должны проверить свойство complete на элементе IMG:

$('fittedImg').each(function() { 
    $(this).load(function() { 
     // the calculations goes here 
    }); 
    if (this.complete) { // check if image is already loaded 
     $(this).trigger('load'); 
    } 
});