在Boostrap中使用img-circle保持完美的圆形

Question

好吧，这似乎是一个有很多潜在解决方案的问题，但没有一个可以解决我想做的事情。我总是希望显示完美的圆圈，即使底层图像不是一个完美的圆圈。但是，我不想通过px指定图像尺寸，因为我希望它能够响应。似乎无论我尝试哪种解决方案，圆圈总是要变成椭圆形或图像尺寸完全接管并使其变得巨大。

HTML：

<div class='item-image'>
    <img class='img-circle img-responsive img-center' src='#' />
</div>

目标：

无论图像大小（矩形）如何，我都希望红色圆圈下方的图像部分能够显示出来。

Answer 1

执行此操作的最佳方法是 overlay 。用CSS创建圆圈！

<div class="wrapper">
    <img src="#" class="img-responsive">
    <div class="circle"></div>
</div>

.wrapper有position: relative，.circle有position: absolute和border-radius: 100%。

包装器必须与inline-block一起定位。使用text-align: center将包装器居中。

将绝对定位元素居中，如下所示：

.el {
    position: absolute;
    top: 50%;
    margin-top: -(height / 2)%;
    left: 50%;
    margin-left: -(width / 2)%;
}

如果您想要圆圈内的图像，请将圆圈放大。

Example

Answer 2

HTML：

<div class="circle">
</div>

并在后台使用css for image：

.circle{
      border: 2px solid red;
      width: 200px;
      height: 200px;
      border-radius:100%;
      background-image: url('')
    }

检查fiddle