Подгонка изображений к окну просмотра - PullRequest
Новая
       24

Подгонка изображений к окну просмотра

1 голос
/ 06 марта 2012

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

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

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

Я обернул этот код в функцию, которую я вызываю при изменении размераи для таких событий, как $ ('. fitImg'). load () и $ ('. fitImg'). ready ().

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

Что не так с моими вычислениями и / или вызовами событий?

Спасибо.

1 Ответ

3 голосов
/ 06 марта 2012
  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');
    }
});
...