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

Question

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

我想到的一个解决方案是首先使用clip:rect(10px,0px,10px,0px)属性将矩形图像转换为方形。通过使用它，它将图像剪切成方形，但不删除剪切的空间。即它使该部分不可见，但图像仍然是矩形的。

剪裁的部分看不见但仍然存在。所以即使现在我正在尝试使用border-radius:50%属性，它会给我椭圆形图像，右侧和左侧被剪裁。

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

Answer 1

选中此项：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 2

这将解决您的问题，但您需要调整宽度和高度，图片将位于中心，但您可以使用background-position: center;

进行调整

<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 3

您需要定义图片的width和height，然后将border-radius应用于该图片。

因此，您可以采取的一种方法是

解决方案1 ​​

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

然而，这可能会使您期望的圆形图像输出出现一些失真。 因此，另一种方式可能是这个

溶液2

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

这里发生的是它会隐藏任何超过100x100规格的东西并产生循环效果。