创建圆形图像[复制]

Question

我想将方形图像转换为圆形图像，但当我应用“边框半径：50px”时，它给了我椭圆形的形状。我尝试了很多东西，但都不起作用。任何帮助都将不胜感激。这是我的超文本标记语言代码-

<代码>

这是我的CSS代码-. Skiling-row-img{宽度：25%；边框半径：50%；}

这是我的图片在网站上的样子。我希望它们有一个圆形。

Answer 1

插入bootstrap框架并使用img流体类

<img src="https://dummyimage.com/600x400/000/fff" alt="placeholder image" class="img-fluid" />

或者使用equallent css样式：

img-fluid {
  max-width: 100%;
  height: auto;
}

您也可以尝试手动设置图像的高度和宽度，尝试使用相同的宽度和高度！！！！

Answer 2

确实如此

border-radius: 999999px;

适合你的需要？

“更好”的解决方案是在CSS中明确指定图像的宽度和高度，而不是让浏览器自动调整大小。

.skill-row-img {
  width: 400px;
  height: 400px;
  border-radius: 200px; /* <-- 50% works here too, because the image is already square so you get a circle rather than an oval*/
}