html - 使用CSS使矩形图像显示为圆形而不会使图片看起来变形

Question

我页面上的每个帖子都有一张图片，我想让矩形图像显示为圆形，执行下面的代码我得到了效果，但图像看起来变形了:我该怎么做才能解决这个问题？

#circular img {
    width: 280px;
    height: 300px;
    border-radius: 150px;
    margin:35px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(http://link-to-your/image.jpg) no-repeat;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .3);
    }

这是一张随机图片的截图:

Answer 1

其中一个选项是使用图像作为背景并像这样设置

https://jsfiddle.net/jL5ek6e8/

<div class="circle" style="background-image:url(http://vignette1.wikia.nocookie.net/joke-battles/images/4/40/18360-doge-doge-simple.jpg/revision/latest?cb=20151209161638)"></div>

.circle {
  width:300px;
  height:300px;
  border-radius:50%;
  border:2px solid white;
  box-shadow: 0 0 20px rgba(0,0,0,.3);
  background-position:50% 50%;
  background-repeat:no-repeat;
  background-size:cover;
}

编辑

除此之外，为什么要将 background 属性放在 img 标签上？