使背景图片完全适合 div

Fit background image to div completly

我已经查看了一些示例,例如 example

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

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

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

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

使用 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>

@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>

你可以试试改background:contain

background-size:fill;

background-size:cover;

整个div都覆盖了背景图。

缩放背景图片以适应 div:

background-size: contain;

缩放背景图片以覆盖整个div:

background-size: cover;

另外,background-repeat: round 提供了最好的结果。不过暂时只对Chrome有效。