如何使背景图片覆盖整个页面大小

Question

如何在使用HTML时将图片设置为封面大小？

 <div class="image">
  <img src="some image"/>
 </div>

CSS

 .image{
   height:300px;
   width:100%;
 }
 .image img{
   background-size:cover;
 }

- Daniel

---

你不能在 div 中的 img 使用 background-size: cover;。但是你可以移除 img，并使用这个 CSS 将源作为背景图像放置在 div.image 中：background: url(some_image_url); - Kyojimaru

在stackoverflow上已经有“很多”关于这个主题的问题和答案，建议在提问之前先查看一下。 - Alvaro Menéndez

Answer 1

尝试以下代码... HTML

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

CSS

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

- user3497034

Answer 2

更多信息请参考此处链接

CSS 代码：

  .image{ 
      background: url(images/bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

- SVK

Answer 3

您可以添加以下代码。

HTML

<div class="image">
  <img src="some image"/>
 </div>

CSS

 .image img{
     background-repeat:no-repeat;
     background-size:cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

- Steevan

Answer 4

html { 
  background: url(images/backround.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

编辑：这是响应式的

请注意，这仅适用于：
Safari 3+
Chrome（全部）
IE 9+
Firefox 3.6+

- Pirate X