如何在圈子中显示用户个人资料图片？ [英] How to display user profile image in circle?

问题描述

我正在开发一个网站，用户的个人资料图片需要显示在一个圆圈中。

I am developing a site where the users' profile image needs to display in a circle. There are many circles on this site and the circle size can vary.

我可以正确显示正方形图像，但是垂直和水平图像我遇到了问题。

I can display square images properly but with vertical and horizontal images I face a problem.

我必须以下列标准在圆圈中显示图片：

I have to display the image in a circle with the below criteria:

• 假设图片大小是 500x300 。图像应该从右侧和左侧裁剪100px，以便显示图像的中心。现在图片应为 300x300 ，居中。然后，我需要从该图像做一个圆。或者使用CSS隐藏图片右侧和左侧的100像素。


• 如果图片大小为 300x500 ，则顶部和底部区域应使用CSS隐藏

• Suppose image size is 500x300. The image should crop 100px off of the right and left sides, so that the center of the image is shown. Now the image should be 300x300, centered. Then I need to make a circle from that image. OR hide 100px of the right and left of the image using CSS.
• If image size is 300x500, then the top and bottom area should be hidden using CSS

我需要做什么来解决这个问题？

What do I have to do to fix this? CSS-only answers are best for me, if possible.

推荐答案

如果图片尺寸不同，请确保它们覆盖div以及在其中心。添加50％border-radius将会做到这一点。

If the images are different sizes you want to make sure they cover the div as well as being centered within it. Adding 50% border-radius will do the trick also.

.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/350x150');
}

.two {
  background-image: url('http://placehold.it/150x150');
}

.three {
  background-image: url('http://placehold.it/350x750');
}

<div class="user one">
</div>

<div class="user two">
</div>

<div class="user three">
</div>

一个真正的环境，你不会有明确的每个图像的类，但你会像这样指定它：

In a real environment you wouldn't have a class for each image obviously, but you'd specify it inline like this:

<div class="user" style="background-image:url('path/to/user/img.png')"></div>

这篇关于如何在圈子中显示用户个人资料图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！