Question

我想将方形图像转换为圆形图像，但是当我应用“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.

Answer 1

会

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*/
}

Answer 2

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

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

或者使用equallent css样式：

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

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

创建圆形图像

2 个答案: