Question

我是网站开发的新手。我需要让我的网站的背景图像响应。我怎么做？它也应该在移动设备上看得很清楚。目前，我正在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>

Answer 1

如果不保证以这种方式进行操作，请将以下内容添加到CSS中：

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

但请记住，如果您在真正的大屏幕上打开页面，就像电视一样，它会失败，因为图像没有放大。如果您不介意升级导致的质量损失，只需删除规则的max-部分即可。这样，图像总是在宽度方向上填充容器。

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

Answer 2

如果您希望图片占据整个屏幕宽度，只需设置width而不是min-width，like this：

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

Answer 3

如果您希望背景图片适合屏幕，可以使用

background-image {
     width: 100%;
}

在你的CSS中

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

3 个答案: