Окно изображений на странице загрузки

Question

Как сделать изображение подходящим для экрана (не полным фоновым изображением), чтобы при прокрутке вниз отображалось другое содержимое?

Пример того, что я говорю здесь:

http://www.microsoft.com/visualstudio/eng/products/visual-studio-professional-2012

В этом примере рассмотрим, как изображение реагирует как при изменении размеров экрана и прокрутки вниз.

С нетерпением жду ваших ответов.

Спасибо.

PS: Если вы также можете отправить демоверсию, это было бы очень полезно. Спасибо!

Answer 1

Следующая JS должно помочь:

function resizeBackground() 
{ 
    var targetWidth; 
    var targetHeight; 

    if (typeof window.innerWidth != 'undefined') 
    { 
     targetWidth = window.innerWidth, 
     targetHeight = window.innerHeight 
    } 
    else if (typeof document.documentElement != 'undefined'&& typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) 
    { 
     targetWidth = document.documentElement.clientWidth, 
     targetHeight = document.documentElement.clientHeight 
    } 
    else 
    { 
     targetWidth = document.getElementsByTagName('body')[0].clientWidth, 
     targetHeight = document.getElementsByTagName('body')[0].clientHeight 
    } 

    var background = new Image(); 
    background.src = document.getElementById("backgroundImage").src; 
    var target = document.getElementById("backgroundImage"); 
    var sourceWidth = background.width; 
    var sourceHeight = background.height; 

    if (targetWidth/sourceWidth > targetHeight/sourceHeight) 
    { 
     target.width = targetWidth; 
     target.height = sourceHeight * (targetWidth/sourceWidth); 
    } 
    else 
    { 
     target.width = sourceWidth * (targetHeight/sourceHeight); 
     target.height = targetHeight; 
    } 
} 
window.onload = resizeBackground; 
window.onresize = resizeBackground; 

Затем вставьте DIV где вы хотели бы вам изображение так:

<div id= 'backgroundimage'></div> 

И, наконец CSS:

#backgroundimage {background-image:url(image.jpg); width:100%;}