Изменение размера и центрирование изображения с помощью jQuery

Question

Похоже, я плохо объяснил себя. Я прошу прощения за это.

Я отредактировал этот вопрос, чтобы сделать его более понятным.

---

Сценарий

У нас есть веб-сайт, на котором нет изображений. Он ссылается на изображение на другом сервере.

---

План

• Изменение размера изображения с сохранением пропорций.
• Центрировать изображения с измененным размером.
• Гибкий, поэтому он может поместиться в нескольких размерах.

---

Ошибка

Мой код работает как задумано, однако есть ошибка, которая встречается только иногда.

Если вы перейдете на страницу поиска веб-сайта и несколько раз переключитесь между страницами 1, 2, 3 и 4, вы заметите, что иногда изображения хороши… в других случаях они выглядят выровненными по левому краю и не занять всю площадь контейнера.

---

ссылки

Полный сайт (в бета-версии)

Файл JavaScript

Плагин jQuery, который мне помог (jThumb)

---

План (подробная версия)

Предположим, что изображение имеет размер 600x400 пикселей (помните, что оно не размещено на этом сервере), и с помощью jQuery и CSS я хочу изменить размер изображения (с сохранением пропорций) в контейнере размером 310x200 пикселей.

Другая задача - центрировать изображение.

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

---

Что я уже сделал (вы можете найти это по ссылке выше)

Чтобы изменить размер изображения, которое я делаю:

var img = new Image();
img.src = $(this).attr("src");
var width = $(this).css('width');
var height = $(this).css('height');

var photoAspectRatio = img.width / img.height;
var canvasAspectRatio = width.replace("px", "") / height.replace("px", "");

if (photoAspectRatio < canvasAspectRatio) {
    $(this).css('width', width);
    $(this).css('height', 'auto');

    var intHeight = height.replace("px", ""); //tirar o PX
    $(this).css('marginTop', (-Math.floor(intHeight / 2)));
}
else {
    $(this).css('width', 'auto');
    $(this).css('height', height);
}

$(this).wrap('<div class="thumb-img" style="width:' + width + ' ;height:' + height + ';"><div class="thumb-inner">' + '</div></div>');

---

Чтобы центрировать изображение, которое я делаю:

jQuery(this).css('position','absolute');
jQuery(this).left( '-' + ( parseInt( $(this).width() ) / 2 ) + 'px' );
jQuery(this).top( '-' + ( parseInt( $(this).height() ) / 2 ) + 'px' );
jQuery(this).css('margin-left', '50%' );
jQuery(this).css('margin-top', '50%');

---

Answer 1

Существует гораздо более простое решение, чтобы определить, как изменить размер и расположить изображение. Он будет работать со всеми размерами изображений и контейнеров.

var canvasWidth = parseInt(width);
var canvasHeight = parseInt(height);

var minRatio = Math.min(canvasWidth / img.width, canvasHeight / img.height);
var newImgWidth = minRatio * img.width;
var newImgHeight = minRatio * img.height;

var newImgX = (canvasWidth - newImgWidth) / 2;
var newImgY = (canvasHeight - newImgHeight) / 2;

Теперь просто поместите изображение с помощью newImgX, newImgY и измените его размер на newImgWidth, newImageHeight.

Answer 2

Вероятно, это состояние гонки.Вы устанавливаете img src, а затем сразу же пытаетесь получить его атрибуты width и height.Но нет никакой гарантии, что веб-браузер загрузил изображение или вытащил его из кэша браузера, а если нет, ваш код приведет к неожиданным результатам.

Вам нужно сделать что-то подобное:

var img = new Image();
var $thumb = $(this);

img.load(function() {
  /* .....[image calculation and resize logic]..... */
});

img.src = $thumb.attr("src");

Обратите внимание, что порядок приведенных выше операторов очень важен - вы должны прикрепить обработчик события img.load сначала , а затем назначить img.src секунду.Если вы сделаете это в другом порядке, вы получите противоположное состояние гонки (изображение может быть уже загружено после назначения img.src, и в этом случае обработчик событий не будет вызываться во всех браузерах - путем установкиСначала обработчик событий гарантирует, что он будет вызван после назначения img.src, даже если изображение уже загружено).

Также обратите внимание на определение $ thumb вверху.Это потому, что «this» внутри функции img.load будет ссылкой на новый «img», а не на элемент thumbnail.Таким образом, ваша логика должна будет ссылаться на «$ thumb» для элемента DOM и «this» (или «img») для изображения в памяти.

Кроме того, для реальной логики взгляните на ответ«Скотт S» предоставлен выше.Его предложение выглядит проще, чем у вас.

Answer 3

Другой полезный плагин, который достигает этого, - jQuery Center Image , который поддерживает два режима. Один, чтобы заполнить все пространство путем обрезки и изменения размера изображения, а другой, который имитирует максимальную ширину / максимальную высоту, чтобы изменить размер, чтобы поместиться в пространство.

Answer 4

Этот скрипт будет уменьшать и выравнивать изображение в зависимости от их ориентации. Изображение округляется с помощью div ho, имеет фиксированную ширину и высоту, а также стиль, установленный для переполнения: скрытый. Сценарий фактически распознает ориентацию изображения и объявление к изображению margin-left или margin-top в минус атрибут стиля, в зависимости от вертикальной или горизонтальной ориентации изображения.

CSS:

<style type="text/css">
.thumb {
width:160px;
height:160px;
overflow:hidden;
}
</style>

JQuery с JavaScript:

window.onload = function() {
  var images = $(".image_center");
  for(i=0; i<images.length; i++)
     images[i].onload = centerImage(images[i]);

  function centerImage(img) {
   if (img.width > img.height ) {
   var y = 160;
   var x = img.width/img.height*y;
   var marx = (x-y)/2;
   img.style.height = y+"px";
   img.style.marginLeft = -(marx) + "px";
   }
   if (img.width < img.height ) {
   var x = 160;
   var y = img.height/img.width*x;
   var mary = (y-x)/2;
   img.style.width = x+"px";
   img.style.marginTop = -(mary) + "px";
   }
  }
}

HTML:

<div class="thumb"><img class="image_center" src="sa.jpg" alt="#" /></div>
<div class="thumb"><img class="image_center" src="sb.jpg" alt="#" /></div>

Демонстрацию можно посмотреть здесь: Ссылка

Answer 5

Я действительно не получил ваш вопрос, но это, возможно, поможет вам.

function resizer(imgCls, maxWidth, maxHeight) {
    var img = $('img'), imgWidth, imgHeight;
    img.each(function () {
        imgWidth = this.width;
        imgHeight = this.height;
        if (imgWidth > maxWidth || imgHeight > maxHeight) {
            var widthFact = maxWidth / imgWidth;
            var heightFact = maxHeight / imgHeight;
            var chooseFact = (widthFact > heightFact) ? heightFact : widthFact;
            imgWidth = imgWidth * chooseFact;
            imgHeight = imgHeight * chooseFact;
        }
    })
}

этот код получает изображения, соответствующие указанному className, и просматривает ваши аргументы.передайте maxWidth в значение maxWidth, например, 300 пикселей, и передайте maxHeight в изображениях, maxHeight, например, в 300.

, тогда функция зациклится для каждого изображения и проверит его ширину и высоту.Если его ширина или высота больше, чем ваши максимальные значения, он будет изменен с сохранением соотношения сторон.

Пожалуйста, дайте вам возможность задать больше вопросов о проблеме и, пожалуйста, быть более ясными.

Answer 6

Это не ясно из вашего вопроса, но я предполагаю, что одной из ваших проблем является выравнивание по левому краю изображений в таблице в нижней половине первой страницы на http://www.algarvehouses.com.

Проблема здесь не в вашем коде jQuery, а в вашем CSS.

добавьте text-align: center к вашему классу thumb-inner. Затем убедитесь, что правило загружено ПОСЛЕ правила "table.dlRandom img, ..." - или удалите блок display: из этого правила. Это должно центрировать эти изображения.

В общем, хотя - чтобы масштабировать изображение, ваша логика выглядит правильно вплоть до точки div. Не совсем понимаю эту логику. Вам не нужно устанавливать автоматический размер, просто ограничьте размер, который требуется.

Один тангенциальный совет - в приведенном выше коде вы ссылаетесь на $ (this) не менее 16 раз. Сделайте это в верхней части функции и используйте ее оттуда:

var $this = $(this);