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: 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 响应式边框半径图像

CSS Responsive Border-Radius Image

html

css

image

cornerradius