Есть ли какой-либо jquery-плагин, чтобы растянуть любой div, чтобы взять весь экран

-2

Я ищу решение, в котором любой элемент изображения можно растянуть, чтобы он соответствовал размеру экрана (масштабировать его) и использовался в качестве фона для этой страницы. Обратите внимание, что я не ищу решение для одного фонового изображения, которое делает backstretch или vegas jquery plugin!Есть ли какой-либо jquery-плагин, чтобы растянуть любой div, чтобы взять весь экран

<body> 
       <div class="somecss"> 
         <img src="images/bg1.jpg"> 
       </div> 
       <div class="somecss"> 
\t \t \t \t   <img src="images/bg2.jpg"> 
       </div> 
\t \t \t \t <div class="somecss"> 
\t \t \t \t \t \t <img src="images/bg3.jpg"> 
\t \t \t \t </div> 
    </body>

источник

2015-07-12 user2746732

«Пожалуйста, обратите внимание, Я не ищу однофотонное решение для изображений, которое делает backstretch или vegas plugin! " Я понятия не имею, что вы подразумеваете под этим. Просьба уточнить. – mooiamaduck

vegas и backstretch - это два плагина jquery, которые делают изображение подходящим для экрана в качестве фонового изображения. но они делают страницу одной страницы. Мое требование - если можно сказать, что есть 3 divs, каждый из них должен принимать полный размер экрана устройства. есть ли контент или нет. – user2746732

CSS background-size: cover может быть то, что вам нужно. Он заполнит изображение размером контейнера. Нет необходимости в JavaScript.

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

Ссылка: https://css-tricks.com/almanac/properties/b/background-size/

источник

2015-07-12 07:26:21 alan0xd7

не проверял и не делает. если изображение больше высоты экрана, оно не исправляет его. – user2746732

Я не понимаю, почему это не сработает. Может быть, вы делаете что-то не так? Неважно, если изображение больше экрана или нет. Вам просто нужен контейнер с фиксированным размером. – alan0xd7

Неясно из формулировки Вашего вопроса, но я думаю, что вы хотите, чтобы растянуть и зафиксировать изображение на фоне страницы. Это может (и должно) быть достигнуто исключительно через CSS, без необходимости jQuery.

body { 
    background-image: url(http://example.com/your/image.jpg); 
    background-size: cover; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: none; 
}

Но для полноты сак:

$.fn.setBackgroundImage = function(url) { 
    return this.css({ 
    backgroundImage: url, 
    backgroundSize: 'cover', 
    backgroundAttachment: 'fixed', 
    backgroundPosition: 'center', 
    backgroundRepeat: 'none' 
    }); 
}; 

$.setBackgroundImage = function(url) { 
    $(document.body).setBackgroundImage(url); 
};

источник

2015-07-12 07:30:42 mooiamaduck

Я не хочу, чтобы фон тела полностью отображался на экране. Я хочу, чтобы каждый div принимал полный экран и делал изображение в качестве фона. – user2746732

Если его специально элемент изображения, а не свойство фонового изображения вы хотите быть изменено, необходимо определить пропорции затем присвоить относительный класс по размеру экрана

$(window).load(function() { 
    $('.container').find('img').each(function() { 
    var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall'; 
    $(this).addClass(imgClass); 
    }) 
})

см http://jsfiddle.net/sjmcpherso/vhotnp1x/

источник

2015-07-12 07:33:51 sjm

проверял, не работает! он не делает изображение подходящим для экрана. он делает это в одном направлении. – user2746732

Есть ли какой-либо jquery-плагин, чтобы растянуть любой div, чтобы взять весь экран

ответ

Смежные вопросы