CSS 响应式边框半径图像

Posted 2023-02-24

【中文标题】CSS 响应式边框半径图像

【英文标题】：CSS Responsive Border-Radius Image

【发布时间】：2019-09-12 14:01:58

【问题描述】：

我想用 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" >
  </figure>
  
</div>

【问题讨论】：

图片的高度和宽度应该相同才能有一个圆圈

好的，但是图像将不再响应，对吧？

***.com/questions/15167545/… 勾选此项以获得方形图像。

【参考方案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" >
  </figure>
  
</div>

【讨论】：

好的，我知道了，但现在图像将不再响应，对吧？我想让那个圆形图像保持响应。

【参考方案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" >
  </figure>
  
</div>

【讨论】：

图片一定是正方形的，我不明白。谢谢！

【参考方案3】：

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

你可以使用这个：How to "crop" a rectangular image into a square with CSS? 来保持它的方正和响应。

之后，你的半径将使它成为圆形。

【讨论】：

如果这解决了您的问题，请不要犹豫将其设置为答案。没问题:)