给头像加border和border-radius

项目要求给用户头像加border和border-radius且保持头像大小不变。
一开始直接用img标签，发现图片加border后被撑大了，后来想到用div加background-image来实现：

<div class="img" style="background-image:xx图片路径..." ></div>

.img{
  width:50px;
  height:50px;
  box-sizing:border-box;
  border:1px solid #ccc;
  border-radius:50%;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  background-clip:padding-box;
}