图像填充和居中圆形

Question

我试图让我的图像居中并填充圆形（不拉伸图像）。目前我只占用了半圈的图像。 您可以在此处查看我的网站 - http://anglican.koru.firebrand.co.nz/

图片将由客户上传，因此我无法拥有＆＃39;背景图片＆＃39;在css中，因为它会不断变化。

由于

Answer 1

因为您在图片中添加了max-width，因此图片会适合圆宽。

删除max-width并添加

max-height: 100%; // this is for fit the height of image to circle
margin-left: -50%; // this is for centering the image

到.img-responsive

Answer 2

将height:auto

更改为height: 100%;至.img-responsive

.img-responsive {
      display: block;
      max-width: 100%;
      height: 100%;  //changed this
    }

Answer 3

从max-width:100%;课程中删除.img-responsive，然后获取圈子。