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

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

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

Сценарий

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

План

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

Ошибка

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

Если вы перейдете на страницу поиска веб-сайта и переключитесь между страницами 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('
' + '
');

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

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%');