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: 150px;
  height: 150px;
  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 2

您可以通过调整图像大小来实现，只需将图像的高度和宽度设置为如下所示即可。

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

#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>

Answer 3

您的图像必须是正方形才能获得此结果。

您可以使用以下命令：How to "crop" a rectangular image into a square with CSS?使其保持方形和响应性。

之后，半径将使其变为圆形。

CSS响应式边框半径图像

3 个答案: