如何让我的网站的背景图像响应？

-4

我是网站开发新手。我需要使我的网站的背景图像响应。我怎么做？在手机上也应该看得很清楚。目前，我展示我的website的相关图片如下：如何让我的网站的背景图像响应？

<img alt="Goodfoo.me" src="http://goodfoo.me/background.jpg" 
    id="full-screen-background-image" /> 
<style> 
#full-screen-background-image { 
    position: fixed; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
} 
</style>

来源

2013-10-13 Freddy Brown

什么是响应能力？你可以解释吗？ – VahiD

图像将自行调整为屏幕尺寸。例如，如果屏幕尺寸是1366 x 768，那么它应该适合确切的屏幕，并且如果它的1024 x 768那么它也应该适合这里。 –

以及谁给它一个负面的投票..也感谢你！ –

如果你想要的形象占据屏幕的整个宽度，只需设置width，而不是min-width，like this：

#full-screen-background-image { 
    z-index: -999; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
}

来源

2013-10-13 10:51:57 phihag

是的，这工作！谢谢Phihag .. –

没有保证，它是有道理的做这种方式，将以下添加到您的CSS：

img { 
    max-width: 100%; 
    height: auto; 
}

但是要请注意，如果您打开真正的大屏幕上的页面，就像电视一样，它会因图像未放大而失败。如果您不介意升级造成的质量损失，只需删除max-规则的一部分即可。这样图像总是以宽度方式填充容器。

请注意，这会影响页面上的所有图像。

来源

2013-10-13 10:51:40 Sven

这将匹配所有图像，这几乎肯定是一个坏主意。另外，如果屏幕宽度超过图像宽度，则会在右侧留出空白区域。 – phihag

@phihag你是对的，看我的编辑。 – Sven

如果你希望你的背景图片适应屏幕，你可以使用

background-image { 
    width: 100%; 
}

在您的css

来源

2013-10-13 10:54:15 VahiD

如何让我的网站的背景图像响应？

回答

相关问题