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

两件事：

将height: auto;更改为height: 100%，然后添加background个样式。

#backdrop {
  z-index: -999;
  min-height: 100%;
  min-width: 100%;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: url("image.jpg") center center no-repeat;
  background-size: cover;
}

此外，请使用HTML 5 Doctype：
```
<!DOCTYPE html>
```

Answer 2

使用object-fit让img的行为与background-image相似。请参阅此工作示例：

＆＃13;

html, body {
  height:100%;
  margin:0;
  padding:0;
}

img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

＆＃13;

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

＆＃13;

无法在css中缩放图像

2 个答案: