Я хотел бы иметь полноэкранный объект изображения, который всегда будет соответствовать размеру видового экрана. Высота обертки изображения должна быть высотой области просмотра. Я сделал это со следующим кодом:
var hero = $( '#hero' );
var win = $( window );
hero.height(win.height());
$( window ).resize(function () {
hero.height(win.height());
});
Я хочу, чтобы элемент изображения внутри обертки всегда находился посередине. Когда мы уменьшаем размер области просмотра, левая и правая стороны элемента изображения должны быть скрыты. Я пришел к следующему gist "fullscreenr". Я попытался воссоздать его для меня, но это не сработает.
Плагин работает, только если я выбираю родителя, для меня id "герой". Когда я меняю селектор на #hero img
он не работает правильно. Изображение будет растягиваться, чтобы изображение было сдвинуто вместе и не исчезло с обеих сторон.
Это код:
/**
* Fullscreenr - lightweight full screen background jquery plugin
* By Jan Schneiders
* www.nanotux.com
*
* Modifications by Chris Van Patten
* http://www.vanpattenmedia.com
* Version 1.5
**/
(function($){
$.fn.fullscreenr = function(options) {
var defaults = { width: 1280, height: 1024, elementID: this.selector };
var options = $.extend({}, defaults, options);
$(document).ready(function() { $(options.elementID).fullscreenrResizer(options); });
$(window).bind("resize", function() { $(options.elementID).fullscreenrResizer(options); });
return this;
}
$.fn.fullscreenrResizer = function(options) {
// Set bg size
var ratio = options.height / options.width;
// Get browser window size
var browserwidth = $(window).width();
var browserheight = $(window).height();
// Scale the image
if ((browserheight / browserwidth) > ratio){
$(this).height(browserheight);
$(this).width(browserheight / ratio);
} else {
$(this).width(browserwidth);
$(this).height(browserwidth * ratio);
}
// Center the image
$(this).css('left', (browserwidth - $(this).width()) / 2);
$(this).css('top', (browserheight - $(this).height()) / 2);
return this;
}
})( jQuery );
$('#hero img').fullscreenr({width: 1400, height: 800});
Надеюсь, вы, ребята, можете мне помочь. Спасибо.
ваш код отлично работает, если вы измените
$(this).css('left', (browserwidth - $(this).width()) / 2);
$(this).css('top', (browserheight - $(this).height()) / 2);
в
$(this).css('margin-left', (browserwidth - $(this).width()) / 2);
$(this).css('margin-top', (browserheight - $(this).height()) / 2);
и добавить
body
{
padding:0;
margin:0;
overflow:hidden;
}
чтобы избавиться от белых пространств.
overflow:hidden;
не нужно, его просто там, чтобы избавиться от полос прокруткивот пример использования вашего кода: FIDDLE
РЕДАКТИРОВАТЬ:
на вашем сайте, на странице style.css
вас есть следующий код:
img, a img {
max-width: 100%;
vertical-align: middle;
}
кажется, устранил проблему.
я воссоздал ваш сайт в этом Fiddle, я прокомментировал img, a img
код img, a img
в стиле справа, попробуйте разоблачить его и посмотреть, как он делает ваш фон растянутым.