可以说，但凡涉及到用户信息展示的页面，用户自定义的头像总是让人记得最深刻，我们也总在这上面花去不少心思。从正方形，到圆角，在到现在的全圆，我们的头像展示也经历着自己的演进。之前我在处理个人头像的时候，想到的总是使用一个DIV+IMG，DIV 正方形并使用50%的圆角，盖在图片IMG的上面。但是这样有一个问题，就是当图片的长宽比很大时，我们要么强行拉伸图片使其不安比例的铺满，要么就等比拉伸进而导致图片不能撑满整个圆形DIV，如果不使用JS，这似乎无解？ 哈哈，我们忽略了CSS的一个属性：background-size

相信我们在图片布局中，总是用到过最新的 background 相关CSS属性，而其中的 background-size 有一个很棒的属性值 cover.

background-size:cover

background-size 有多种属性值，可以直接查看MDN文档

该属性可以使图片正好铺满相应的DIV，最难得的是，它是按照图片较小的那一边来做缩放的， 这是我们一直追寻的效果！

1
2
3
4
5
6
7
.avator {
  width: 100px;
  height: 100px;
  background-image: url('somewhere.png');
  background-size: cover;
  background-position: center
}

喜悦归喜悦，这种方式有一个问题：如何动态设置这个背景呢？
如果是IMG标签，我们设置src就好了，对于DIV难道我们每次都生成一个div然后强制重写 style {background-image: url('new.png')}? 如果是以前我也觉得这样写很变扭，但是接触了react一阵子，这种方式看起来还蛮正常的。。=_=。

React 中比较“自然”的实现

React中会出现很多的直接将style写入component里面去的地方，这样的好处不少，比如可以独立的发布，更快的渲染速度。按照这种模式，style 样式其实和普通的JS一样，是可编程的！这就为我们动态设置 background-image 打开了大门。

实现如下：

background-position:center
针对长度大于宽度，或者宽度大于长度的照片，background-size:cover 都可以帮我们很好的布局。值得注意的是，这里面还有一个属性 background-position:center, 没有它的话，图片是从左向右，从上到下放置的，有了center后，布局才算美好。

后话

通过 background-size:cover 不只是可以生成圆形图片，实际上，任何需要这种铺满的效果都可以用到它。当然考虑到兼容性，它对IE8是无效的;)