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

Question

我是网站开发的新手。我需要使我的网站的背景图像响应。我怎么做？在手机上也应该能很好地看到它。目前，我在我的网站上显示图像如下：

<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

如果你想让你的背景图片适合屏幕，你可以使用

background-image {
     width: 100%;
}

在你的 CSS

Answer 2

如果您希望图像占据屏幕的整个宽度，只需设置width而不是min-width，如下所示：

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

Answer 3

在不保证这样做有意义的情况下，将以下内容添加到您的 CSS 中：

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

但请记住，如果您在非常大的屏幕（如电视）上打开页面，则会因为图像未放大而失败。如果您不介意升级造成的质量损失，只需删除max-规则的部分即可。这样，图像总是按宽度填充容器。

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