如何在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;
}

Answer 1

css规则在开始时需要.（如果它与类一起应用）或#（如果它与ID一起应用）。

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

最后，50%半径是圆所需的全部。

null

.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%;
}

html lang-html prettyprint-override">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"/>