html - CSS响应边框半径图像

Question

我想通过 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>

Answer 1

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

这只是您可以做到的另一种方式..

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

<div id="main">
  
  <figure id="img-div">
    <img id="image" src="/image/q2ola.jpg" alt="A bulb that represent electricity">
  </figure>
  
</div>