CSS 的 background-size

2015/03/21 | 1分钟阅读 | 更新于 2015/03/21

刚试着去弄一个大图背景出来，css中这样规定

background: url("./bg.jpg");

可是图片怎么居中？怎么缩放？我用的编辑器是Brackets，我就一边敲backgroun…一边看提示，看到了background-size，跑出去一搜，回来做了个实验验证了一下

从上到下依次是

一张原版图片（缩放后）
background-size: auto;
background-size: contain;
background-size: cover;

然后得到的效果依次是

原图
背景图片不缩放
背景图片适应div宽高（会失真）
背景图片居中，优先适应短边

明显第三个适合之前的要求

兼容IE9+，别的浏览器现在的版本基本上没问题

附测试的代码

图片自己替换一个吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style>
      div,
      body {
        margin: 0px;
        padding: 0px;
        background-color: #66aadd;
      }
      div.box {
        width: 100%;
        height: 100%;
      }
      img {
        display: block;
        max-width: 400px;
        max-height: 300px;
        text-align: center;
        margin: 10px auto;
      }
      div.s {
        width: 400px;
        height: 300px;
        margin: 10px auto;
        background: url("./bg.jpg");
      }
      div#a {
        background-size: auto;
      }
      div#b {
        background-size: contain;
      }
      div#c {
        background-size: cover;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <img src="./bg.jpg" />
      <div class="s" id="a"></div>
      <div class="s" id="b"></div>
      <div class="s" id="c"></div>
    </div>
  </body>
</html>