强制图像标签成为完美的圆

本文介绍了强制图像标签成为完美的圆的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

这可能吗?无论图像是否不是完美的正方形，我都希望图像是一个完美的圆，即: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="www.fillmurray/460/300" alt=""> </div> <h2> Actual Image</h2> <img src="www.fillmurray/460/300" alt="">