Код:
function resizeImage()
{
// this just dynamically changes the width of the wrapper depending on the popup width
// to properly calculate what size should the image be fit into
var largeWidth = gallery.offsetWidth - 300;
setStyle(div, "width: " + largeWidth + "px");
maxWidth = div.offsetWidth;
if (maxWidth < 300) // can only happen if CSS max-width is not supported
{
maxWidth = 300;
}
maxHeight = div.offsetHeight - 60;
if (maxHeight < 240)
{
maxHeight = 240;
}
var style = "width: " + ((origWidth > maxWidth) ? maxWidth : origWidth) + "px;";
setStyle(img, style); // at this point the image is fit into the wrapper by width, still need to check the height
if (img.height >= maxHeight) // the height is out of bounds
{
style = "height: " + maxHeight + "px;";
}
else // height is not enough, pad it by half (hack for vertical-align: middle...)
{
style += 'padding-top: ' + Math.floor((maxHeight - img.height) / 2) + "px";
}
setStyle(img, style);
}
Проблема:
Каждый браузер, который я тестировал (IE 7,8,9 режимов документов (отступы и поля: auto не работает в режиме Quirks, поэтому нет центрирования там), Safari 5.1.2, Opera 11.61, Chrome 17.0.963.66) выполняет эту работу достаточно хорошо заполнение всегда корректно, независимо от того, насколько быстро я переключаю изображения (справа от большого изображения есть эскизы, а изображения можно переключать с помощью клавиш со стрелками). НО Firefox 10.0 (.2) имеет странную проблему: когда вы переключаете изображения, чаще всего отступы / высота нарушаются (иногда отступы в 3 раза больше, чем должны быть, или их вообще нет, или высота не меняется). и т. д.). Есть ли проблема в том, как Firefox изменяет размеры изображений или что-то? Потому что я не могу понять, почему только Firefox делает это (даже проклятый IE работает отлично по сравнению с FF).
Если есть необходимость в дополнительной информации, спросите об этом. Я мог бы, конечно, просто добавить ссылку на реальную страницу, но я не уверен, разрешено ли это, поэтому пока воздержусь от этого.
Редактировать: хорошо, мне удалось немного приблизиться к проблеме (я думаю). Когда я изменяю источник изображения (img.src) и console.log img.width и img.height, источник меняется, но ширина и высота НЕ СДЕЛАЮТ !! И это происходит только в Firefox! WTF это что?