使背景图像完全适合 div [重复]

Question

我有一些例子，比如example

我尝试了不同的方法，将background-size 更改为cover or contain，但我怎样才能使背景图像覆盖整个 div

在这里你可以看到更新后的jsfiddle，其中背景图片没有覆盖整个div

Answer 1

缩放背景图片以适应 div：

background-size: contain;

缩放背景图像以覆盖整个 div：

background-size: cover;

另外，background-repeat: round 提供了最好的结果。不过，它暂时只能在 Chrome 上运行。

Answer 2

你可以尝试改变背景：包含

background-size:fill;

或

background-size:cover;

两者都被背景图片覆盖在整个div中。

Answer 3

@gave up 现在检查。我在其中添加了一些 CSS 属性。

#imagecontainer {
    
    background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
    border: 1px solid;
    
     -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<div id="imagecontainer">
  hi
  dadsa
  <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div>
  dasd
  asd
  as
  d
  asd
  asd
</div>

Answer 4

将 contain 替换为 fill 或 ``... 像这样 但要知道，当使用 fill 时，图像会被略微裁剪...

//background-size:fill;
//background-size:cover;

Answer 5

使用 background-size:cover; 而不是 background-size:contain;

#imagecontainer {
    
    background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg")  no-repeat;
    border: 1px solid;
    background-size:cover;
    /*background-size:contain;*/
}

<div id="imagecontainer">
  hi
  dadsa
  <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div>
  dasd
  asd
  as
  d
  asd
  asd
</div>