强制图像标签成为完美的圆 [英] Force image tag to be perfect circle

问题描述

这可能吗?无论图像是否不是完美的正方形，我都希望图像是一个完美的圆，即:100px x 100px.

Is this possible? I want an image to be a perfect circle no matter if the image is not a perfect square ie: 100px x 100px.

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

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

With that code, if the image is 200x150, the img tag would be in the shape of an oval. Could I get a perfect circle no matter the image size?

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

推荐答案

不，您需要将图像包装在div中，对其进行四舍五入并隐藏任何溢出.

No, you need to wrap the image in a div, apply the rounding to that and hide any overflow.

在这里，我还使用flexbox将图像居中，但这不是必须的.

Here I have also centered the image with flexbox but that's not a requirement.

.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="">

这篇关于强制图像标签成为完美的圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！