html - 无法在 css 中缩放图像

Question

我想要一张特定的图片覆盖我网站的整个背景，并且在调整窗口大小时，我希望图片相应地缩放。我要找的是类似 https://www.tumblr.com 的东西.请注意背景中的图片会根据窗口大小进行缩放。

这是我的CSS:

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#backdrop {
  z-index: -999;
  min-height: 100%;
  min-width: 100%;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

#backdrop 是我正在使用的图像的 ID。

我已经尝试了很多方法，但似乎没有任何改变我图像的显示方式。

Answer 1

使用object-fit让 img 表现得像 background-image。请参阅此工作示例:

html, body {
  height:100%;
  margin:0;
  padding:0;
}

img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<img src="http://lorempixel.com/g/1100/300">