Border-radius未将图像转换为圆形图像

Question

当我在图像上使用50%的边界半径时，图像不会转换为圆形图像，但它看起来像一个椭圆。问题出在哪里？

我在代码中使用了bootstrap。

HTML代码。

  <div class="container-fluid">
          <div class="row" id="about">
                <div id="image" class="col-sm">
                        <img src="https://www.wallpaperflare.com/static/1010/124/855/alan-walker-4k-man-wearing-wallpaper.jpg" alt="Hoddie Man">
                </div>
          </div>
   </div>

CSS代码。

#about{
    margin-top:3%;
}

#about img{
    width:40%;
    border-radius:50%;
}

Answer 1

嗯，border-radius: 50%在框周围画了一个椭圆边框--这正是它应该做的。

如果你的长方体(或你的图像)是二次的，椭圆就会变成一个圆。

因此，如果图像的固有宽度和高度相等，那么代码应该可以工作，不是吗？

另一种解决方案可能类似于：

img { width:40vw; height:40vw; border-radius:50% }

或

img { width:40vmin; height:40vmin; border-radius:50% } (在面向横向的视口上可能会产生更好的效果)

Answer 2

尝试使用像素添加固定的宽度和高度

#about {
  margin-top: 3%;
}

#about img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

<div class="container-fluid">
  <div class="row" id="about">
    <div id="image" class="col-sm">
      <img src="https://www.wallpaperflare.com/static/1010/124/855/alan-walker-4k-man-wearing-wallpaper.jpg" alt="Hoddie Man">
    </div>
  </div>
</div>

​