创建圆形图像[重复]答案

【问题标题】：Creating a round image [duplicate]创建圆形图像[重复]
【发布时间】：2021-04-28 05:12:00
【问题描述】：

我想将方形图像转换为圆形图像，但是当我应用“border-radius:50px;”时它给了我椭圆形的形状。我尝试了很多东西，但它只是不工作。任何帮助，将不胜感激。这是我的 HTML 代码 -

<img class=" skill-row-img" src="images/200w.webp" alt="">

这是我的 CSS 代码 - .skill-row-img { width: 25%; border-radius: 50% ;}

This is how my images are looking on the website .I want them to have a round shape.

【问题讨论】：

您的图片尺寸不正确。设置相同的宽度和高度，它会工作

标签： html css image

【解决方案1】：

插入引导框架并使用 img-fluid 类

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

或者使用相等的css样式：

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

你也可以尝试手动设置图片的高度和宽度，尽量使用相同的宽度和高度！！！

【讨论】：

【解决方案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*/
}

【讨论】：

非常感谢，它成功了。所以为了让图像变得圆润，我们需要保持它的高度和宽度相同吗？