html - 在 Bootstrap 中使用 image-circle 保持完美的圆

Question

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

HTML:

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

目标:

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

Answer 1

执行此操作的最佳方法是通过叠加层。并用 CSS 制作圆圈!

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

.wrapper 有 position: relative 和 .circle 有 position: absolute 和 border-半径:100%。

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

---

居中一个绝对定位的元素如下:

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

---

如果你想要圆圈内的图像，把圆圈放大。

Example