0

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

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

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

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

4

3 回答 3

0

您需要定义图像的widthandheight然后应用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 规格的东西并产生圆形效果。

于 2017-05-10T10:30:31.223 回答
0

检查这个：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" />

于 2017-05-10T10:27:41.483 回答
0

这将解决您的问题，但您需要调整宽度和高度，图像将位于中心，但您可以使用调整它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>
于 2017-05-10T10:28:41.983 回答