如何在css中制作圆形图像

Stefan 发表于 Dev

斯特凡

我对这种事情很陌生，但这是我的问题。我看了几个问题，如何使其变为圆形是有意义的，但是圆形的图像被截断了一半，有没有办法解决这个问题。我正在使用HTML和CSS。

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

加布里埃莱·彼得里奥利（Gabriele Petrioli）

您的css规则在开始时需要.（（如果应用了class）或#（如果应用了id）。

同样，如果将规则应用于图像的容器，则需要将图像设置为相应地调整大小以适合圆形。

最后，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://lorempixel.com/500/500/cats/1"/>
</div>

<br><br>
directly on image

<img class="circular_image" src="http://lorempixel.com/500/500/cats/2"/>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。