Мне нужно подогнать изображения к размеру окна просмотра/окна.Fit images to viewport
Я использую этот код для делать это:
$(".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 никогда не терпит неудачу, и сафари вообще игнорируют вычисления (когда-либо растягивающиеся).
Что случилось с моими расчетами и/или вызовами событий?
спасибо.
1. Как я могу это сделать? load() и ready() недостаточно хороши? 2. Не помогает. – SRachamim
Смотрите мой пример как шаблон. '.load()' должно быть достаточно, чтобы получить ширину/высоту, но вы можете консольно настроить значения в обработчике, чтобы убедиться. – David