自举'；s img circle css类将我的图像调整为不同的比例

我想拍摄一张图像（它应该适用于正方形或矩形），并将其做成一个固定大小的圆。现在，我使用Bootstrap的img circle类和我自己的css。以下是我自己的CSS：

.circle-img {
  min-width: 250px;
  min-height: 250px;
  max-width: 250px;
  max-height: 250px;
}

---

但是，它会获取一个矩形图像并压缩它，从而弄乱比例。

要对矩形图像执行此操作，您应该在img周围创建一个包装器，并将.img circle类放在包装器上。这样，可以将圆内的图像重新定位到所需的任何位置（在下面的示例中水平居中）

。圈出img{
宽度：250px；
高度：250px；
溢出：隐藏；
}
.圆圈img img{
身高：100%；
转化：translateX（-50%）；
左边距：50%；
}

---

img circle的替代品也很好：