我正在开发一个网站，用户的个人资料图片需要以圆圈形式显示。此网站上有许多圈子，圈子大小可能会有所不同。
我可以正确显示方形图像，但垂直和水平图像我遇到问题。
我必须使用以下标准将图像显示在一个圆圈中：
>假设图像大小为500×300。图像应从右侧和左侧裁剪100px，以便显示图像的中心。现在图像应该是300×300，居中。然后我需要从该图像中制作一个圆圈。或者使用CSS隐藏图像左右两侧的100px。
>如果图像大小为300×500，则应使用CSS隐藏顶部和底部区域
解决方法
背景大小
由于图像大小是可变的，您需要确保它们覆盖div以及在其中居中。
.user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.one {
background-image: url('http://placehold.it/400x200');
}
.two {
background-image: url('http://placehold.it/200x200');
}
.three {
background-image: url('http://placehold.it/200x400');
}
<div class="user one"> </div> <div class="user two"> </div> <div class="user three"> </div>
实际上，您不希望每个图像都有一个类，因此您需要在标记中使用内联样式指定它：
<div class="user" style="background-image:url('path/to/user/img.png')"></div>
对象的合
更新的替代方法是在常规< img>上使用object-fit属性。标签。这在IE或旧版Edge(CanIUse)中不起作用。
.user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
<img src="http://placehold.it/400x200" class="user"> <img src="http://placehold.it/200x200" class="user"> <img src="http://placehold.it/200x400" class="user">
