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规则需要.（如果它应用了class ）或#（，如果它应用了{{ 1}} ）一开始。

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

最后，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%;
}

Answer 2

只需将border-radius:50%;添加到circular_image班级。

在neet代码下面是......

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

Answer 3

您必须将border-radius设置为img本身，而不是包含div。如你所知，图像是正方形或矩形，将它们放入圆形内部当然会切断边界。

img { 
    border-radius: 50%; 
    width: 100px;
    height: 100px;
}

这是小提琴：http://jsfiddle.net/LLo1u3Ld/2/

Answer 4

这对我有用

clip-path: circle();

如何在CSS中制作圆形图像

4 个答案: