强制图像标签为完美圆形答案

【问题标题】：Force image tag to be perfect circle强制图像标签为完美圆形
【发布时间】：2021-07-03 02:07:42
【问题描述】：

这可能吗？无论图像不是完美的正方形，我都希望图像是完美的圆形，即：100px x 100px。

.circle {
 border-radius: 50%;
 height: 100px;
 width: 100px;
}

使用该代码，如果图像为 200x150，img 标记将是椭圆形。无论图像大小，我都能得到一个完美的圆圈吗？

<img class="circle" src="/link/to/img.jpg" height="80" width="80" />

【问题讨论】：

@Paulie_D 怎么样？ JS 参与？无论如何，我必须得到完美的圆。愚蠢，我知道。
不，看我的回答。

标签： html css

【解决方案1】：

不，您需要将图像包装在 div 中，对其应用舍入并隐藏任何溢出。

在这里，我还使用 flexbox 使图像居中，但这不是必需的。

.circle {
 border-radius: 50%;
 height: 100px;
 width: 100px;
 overflow: hidden;
 display: flex;
 justify-content: center;
 align-items: center;
}

<div class="circle">
  <img src="http://www.fillmurray.com/460/300" alt="">
</div>

<h2> Actual Image</h2>

  <img src="http://www.fillmurray.com/460/300" alt="">

【讨论】：

是的。完美的。谢谢。可以在几分钟内将其标记为答案。

【解决方案2】：

我知道这个问题有点老了，但实际上有一种方法可以在不使用包装 div 的情况下实现所要求的内容：

.circle {
 border-radius: 50%;
 object-fit: cover;
}

<img class="circle" src="/link/to/img.jpg" height="80" width="80" />

【讨论】：

【解决方案3】：

使用object-fit 属性。图片是宽是长都没有关系，它总是被布置成一个完美的圆圈。

.circle {
 border-radius: 50%;
 height: 100px;
 width: 100px;
 object-fit: cover;
 object-position: center;

<img class="circle" src="/link/to/img.jpg" height="80" width="80" />

以下是使用所有不同尺寸图片的示例： https://codepen.io/rockycorp/pen/ZEKbzzp

【讨论】：