使矩形图像与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标记上？

Answer 2

您需要设置方括号border-radius: 50%;

#circular  {
    width: 400px;
    height: 400px;
    border-radius: 50%;
        margin:35px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    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 3

如果您无法控制图片比例（例如来自其他网站或上传的用户），您可以使用clip-path属性：

http://codepen.io/jaycrisp/pen/YwJqQR

.clip {
  width:500px;
  height: 500px;
  clip-path: circle(250px at center);
}

请注意，浏览器支持还不完善：

http://caniuse.com/#search=clip-path

您还可以通过使用带有边框半径的背景图像来解决此问题，但是出于可访问性原因，这可能对您无效。