Плагин liFullSize подгоняет изображение под размеры окна браузера, не искажая его пропорций.
При этом изображение всегда будет занимать весь экран.
liFullSize максимально упрощает выполнение этой задачи так как очень прост в подключении и весит всего 1kb
Подключаемые файлы
Подключаем CSS "liFullSize"
Подключаем библиотеку "jQuery" и плагин "liFullSize":
Структура HTML
Вставляем в HTML изображение и присваиваем ему любое имя класса
<img class="fullsize" src="/pic/img1.jpg">
Инициализация плагина
Остается только скормить плагину "liFullSize" нашу картинку.
Так как работаем с изображением и обязаны дождаться его полной загрузки, то делаем это через событие "$(window).load()"
$(function(){
$(window).load(function(){
$('.fullsize').liFullSize()
})
});
CSS
Подключаемый CSS плагина содержит всего две строчки.
В него вынесены параметры элементов, которые, возможно прийдется изменять, в зависимости от особенности использования плагина.
.fullsize { z-index:-999}
.fullsizeWrap { position:fixed;z-index:-999}
JAVASCRIPT
Зарываемся внутрь файла "jquery.liFullSize.js" и разбираем особые моменты
(function ($) {
$.fn.liFullSize = function () {
return this.each(function () {
var
/*
Изображение может выходить за пределы экрана,
поэтому окружаем его дополнительным элементом
со свойством "overflow:hidden"
*/
elWrap = $('<div>').addClass('fullsizeWrap')
.css({
left: '0',
top: '0',
width: '100%',
height: '100%',
overflow: 'hidden'
}),
el = $(this).css({
position: 'absolute'
}).wrap(elWrap),
/*
Определяем реальную высоту и ширину изображения.
Для этого делаем его клон, чистим этот клон от параметров,
влияющих на размеры,
и вставляем его в код.
Высоту и ширину считываем уже именно с клона.
*/
elClone = el.clone().css({
left: '-9999px',
top: '-9999px'
}).appendTo('body'),
elCloneW = elClone.width(),
elCloneH = elClone.height(),
wW = $(window).width(),
wH = $(window).height(),
/*
И все это для того чтобы определить коэффициент пропорциональности (КП)
*/
elFactor = elCloneW / elCloneH,
wFactor = wW / wH,
fullSizeFunc = function () {
/*
А тут уже смотрим на разницу КП изображения и КП окна браузера
*/
if (elFactor < wFactor){
/*
Подгоняем высоту изображения под его ширину учитывая КП
*/
var
elH = wW / elFactor,
elTop = (elH - wH) / 2;
el.css({
width: wW,
height: elH,
top: -elTop,
left: '0'
});
} else {
/*
Подгоняем ширину изображения под его высоту учитывая КП
*/
var
elW = wH * elFactor,
elLeft = (elW - wW) / 2;
el.css({
height: wH,
width: elW,
left: -elLeft,
top: '0'
});
}
};
elClone.remove();
fullSizeFunc();
/*
Для любителей поиграть с размерами окошка браузера
происходит мгновенный пересчет всех параметров
*/
$(window).on('resize', function () {
wW = $(window).width();
wH = $(window).height();
wFactor = wW / wH;
fullSizeFunc();
});
});
};
})(jQuery);
Пример работы на JSFIDDLE