将矩形图像转换为圆形图像

Question

我的目标是使图像圆形并显示它。如果图像是方形的，那么我可以通过简单地使用CSS的边框半径：50%属性将其转换为圆形。但是当图像是矩形时，使用这个CSS属性会给我椭圆形的图像。

剪辑的部分是不可见的，但仍然存在。所以即使现在我也在尝试使用边框半径：50%属性，它给我椭圆形图像，右侧和左侧被剪辑。

我有什么办法可以解决这个问题吗？

Answer 1

这将解决您的问题，但您需要调整宽度和高度，图像将位于中心，但您可以使用背景位置：中心

<div style="margin-top:5%"> 
    <div style="height:200px;width:200px; margin: 5% auto;
         background-image: url(https://i.stack.imgur.com/oImMD.png);
         background-repeat: no-repeat;    border-radius: 50%;
         border: 5px solid #fff;background-position: center;">
    </div>
</div>

Answer 2

检查此项：http://bennettfeely.com/clippy/使用此选项，您可以在圆中剪切图像的特定部分。

img {
  width: 280px;
  height: 280px;
  -webkit-clip-path: circle(50.0% at 50% 50%);
  clip-path: circle(50.0% at 50% 50%);
}


/* Center the demo */

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSCZNdFX5bx4Y_s8H-StHpWx3ujpCsG3qxhIu_-57pqSq3wKPEbndqnmROl" />

Answer 3

您需要定义图像的宽度和高度，然后对其应用border-半径。

因此，你可以这样做

.circle-img {
   height: 100px;
   width: 100px;
   border-radius: 50%;
}

然而，这可能会对您期望的圆形图像输出造成一些失真。那么，还有什么别的办法呢

.circle-wrapper {
   height: 100px;
   circle: 100px;
   overflow: hidden;
   border-radius: 50%;
}

这里发生的事情是，它将隐藏任何超过100x100规格的内容，并产生循环效果。