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

Question

我的目标是使图像变圆并显示。如果图像是方形的，那么我可以通过简单地使用 CSS 的border-radius:50%property 将其转换为圆形。但是当图像是矩形时，使用这个 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 规格的东西并产生圆形效果。