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