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%;}

图像覆盖页面加载窗口

1 个答案: