如何在css中制作圆形图像

Question

我对这种事情很陌生，但这是我的问题。我已经查看了几个问题，如何将其制作成圆形是有意义的，但是制作成圆形的图像被切掉了一半，有没有办法解决这个问题。我正在使用 HTML 和 CSS。

 circular_image {
  float: left;
  margin-left: 125px;
  margin-top: 20px;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  overflow: hidden;
  background-color: blue;
}

原文由 Stefan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Your css rule needs a . ( if it applied with a class ) or # ( if it is applied with an id ) at开始。

此外，如果将规则应用于图像的容器，则需要将图像设置为相应地调整大小以适合圆圈；

最后， 50% 半径是你所需要的一个圆。

 .circular_image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background-color: blue;
  /* commented for demo
  float: left;
  margin-left: 125px;
  margin-top: 20px;
  */

  /*for demo*/
  display:inline-block;
  vertical-align:middle;
}
.circular_image img{
  width:100%;
}

 with container

<div class="circular_image">
  <img src="http://placekitten.com/500/500"/>
</div>

<br><br>
directly on image

<img class="circular_image" src="http://placekitten.com/g/500/500"/>

原文由 Gabriele Petrioli 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这对我有用

clip-path: circle();

原文由 Deuel Ellan 发布，翻译遵循 CC BY-SA 4.0 许可协议