我正在用户资料里创建一个圆形头像,打算将用户的图像设定在圆形头像容器中。
如果图片是正方形,则不会有问题。
然而,对于非正方形的图片,我无法限制图片的大小,比如这个非正方形的图片:
我会得到这样的结果:
以下是我使用的 CSS 代码:
.avatar_container {
display: inline-block;
width: 25%;
max-width: 110px;
overflow: hidden;
}
.avatar_container img {
border-radius: 50%;
}
我该怎么做才能始终保持圆形头像?并且其中的图像不会变形?溢出应该被隐藏