html - CSS响应式边框半径图像

我想通过CSS使图像变为圆形，但是当我使用border-radius: 50%;时，图像变为椭圆形。

我希望输出带有该图像的响应圈。

我该怎么做？

谢谢！

#image {
  width: 100%;
  border-radius: 50%;
}

<div id="main">

  <figure id="img-div">
    <img id="image" src="https://wallpaperaccess.com/full/486693.jpg" alt="A bulb that represent electricity">
  </figure>

</div>

最佳答案

您可以通过调整图像大小来做到这一点，只需使图像的高度和宽度相同，如下所示。

这只是您可以做到的另一种方法。

#image {
  width: 100%;
  border-radius: 50%;
}

<div id="main">

  <figure id="img-div">
    <img id="image" src="https://i.stack.imgur.com/q2ola.jpg" alt="A bulb that represent electricity">
  </figure>

</div>