Как динамически размер изображения зависит от размера окна?

Я пытаюсь добиться эффекта, как показано на этом сайте http://seosussex.co.uk/. Когда окно браузера изменяется, верхнее изображение также изменяется на него. Как я могу сделать это, чтобы верхнее изображение полностью отображалось, когда посетитель сначала отправляется на сайт?Как динамически размер изображения зависит от размера окна?

Код, который у меня есть, полностью изменяет размер изображения, и он полностью не заполняет окно.

 //Set initial size 
    var height = $(window).height(); 
    var cHeight = height + "px"; 
    $('#topImage').css("height",cHeight); 

    //Set size on window.resize 
    $(window).resize(function(){ 

     var height = $(window).height(); 
     var cHeight = height + "px"; 
     $('#topImage').css("height",cHeight); 

    });

источник

2014-07-23 Michael

Это может быть самый медленный сайт я когда-либо посещал. – royhowie

Что происходит, когда вы явно задаете ширину, а также высоту? –

Я бы на самом деле предлагаю вам использовать стиль фона с крышкой. В противном случае у вас будет вялый сайт, такой как seosussex.

например.

<style> 
    body { 
     background: url('image-here') no-repeat center center; 
     background-size: cover; 
     display: block; 
     ... 
    } 
</style>

например: an example

источник

2014-07-23 02:24:27 Mykel

Будьте осторожны, дети, если вы хотите использовать это с IE8 или еще хуже, вам нужно будет использовать полиполк, такой как https://github.com/louisremi/background-size-polyfill –

Они используют MaxImage для полноразмерных изображений bg.

http://seosussex.co.uk/js/jquery.maximage.js

Вот некоторые заметки из кода ...

/* 
-------------------------------------------------------------------- 
MaxImage 2.0 (Fullscreen Slideshow for use with jQuery Cycle Plugin) 
-------------------------------------------------------------------- 
This plugin is intended to simplify the creation of fullscreen 
background slideshows. It is intended to be used alongside the 
jQuery Cycle plugin: 
http://jquery.malsup.com/cycle/ 

If you simply need a fullscreen background image, please 
refer to the following document for ways to do this that 
are much more simple: 
http://css-tricks.com/perfect-full-page-background-image/ 

If you have any questions please contact Aaron Vanderzwan 
at http://www.aaronvanderzwan.com/blog/ 
Documentation at: 
http://blog.aaronvanderzwan.com/2012/07/maximage-2-0/ 

HISTORY: 
MaxImage 2.0 is a project first built as jQuery MaxImage Plugin 
(http://www.aaronvanderzwan.com/maximage/). Once CSS3 came along, 
the background-size:cover solved the problem MaxImage 
was intended to solve. However, fully customizable 
fullscreen slideshows is still fairly complex and I have not 
found any helpers for integrating with the jQuery Cycle Plugin. 
MaxCycle is intended to solve this problem. 
*/

источник

2014-07-23 02:20:43

Как динамически размер изображения зависит от размера окна?

ответ

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