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

---

使用 border-radius:50%。 - Sachin Kanungo

你能展示一张图片吗？ - Krii

感谢大家的帮助和快速回复:D - Stefan

Answer 1

这对我来说有效

clip-path: circle();

- Deuel Ellan

---

不确定为什么这不是答案...效果很好。当React.js中的Boostrap的"roundedCircle"属性对我无效时，我不得不使用此解决方案。 - Shane Sepac

谢谢，这比使用border-radius：50%在图像宽高不同时效果好得多。 - Matheus Ribeiro

clip-path在大多数浏览器中的支持有限。请确保您可以处理这些限制。https://caniuse.com/css-clip-path - johnw182

johnw182，阅读了您的评论并查看了您提供的链接，可能会给人留下这只是部分受浏览器支持的印象。但更仔细地阅读链接似乎表明，大多数主要浏览器都支持所给出的答案，任何限制都是针对其他公式（例如外部SVG剪切路径），而不是与此答案相关的。 - Garret Wilson

Answer 2

如果你要应用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://placekitten.com/500/500"/>
</div>

<br><br>
directly on image

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

- Gabriele Petrioli

---

只有当图像是正方形时才有效。如果您用矩形图像替换它，它就不起作用了。 - johnw182

@johnw182，是的。OP 的问题是关于正方形图像的，因此出现了这个答案。 - Gabriele Petrioli

Answer 3

你需要将border-radius设置到图片本身，而不是包含它的div上。正如你所知道的，图片是方形或矩形的，在圆形容器中放置图片会裁剪掉边界。

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

这是代码演示链接：http://jsfiddle.net/LLo1u3Ld/2/。

- Gbreux

Answer 4

只需将border-radius:50%;添加到类中即可。

下面是完整代码...

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

- Sarower Jahan

Answer 5

使用clip-path: circle()将会产生神奇的效果。只需为包含图像的容器设置宽度或高度，并将clip-path: circle()应用于图像本身即可。请保留HTML标签。

- justAbajit

Answer 6

如果你使用tailwindcss，你可以选择加入这个。

<Image
 className="h-[50px] w-[50px] rounded-full object-cover"
 src={HouseImage}
 alt="house to invest in"
/>

希望能对某些人有所帮助。

- serhii kuzmych