Question

我正在开发一个网站，用户的个人资料图片需要以圆圈形式显示。此网站上有许多圈子，圈子大小可能会有所不同。

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

我必须使用以下标准将图像显示在一个圆圈中：

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

我该怎么做才能解决这个问题？如果可能的话，CSS-only答案对我来说是最好的。

Answer 1

`background-size`

MDN - CSS Tricks - Can I Use

由于图片尺寸可变，您需要确保他们cover div以及center。

添加border-radius: 50%;将为您提供圆圈效果。

＆＃13;

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

＆＃13;

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

＆＃13;

在实践中，您不希望每个图像都有一个类，因此您需要在标记中使用内联样式指定它：

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

`object-fit`

MDN - CSS Tricks - Can I Use

更新的选择是在常规object-fit标记上使用<img>属性。这在IE或旧版Edge中不起作用。

＆＃13;

.user {
  display: inline-block;
  width: 150px;
  height: 150px;
  border-radius: 50%;

  object-fit: cover;
}

＆＃13;

<img src="http://placehold.it/400x200" class="user">
<img src="http://placehold.it/200x200" class="user">
<img src="http://placehold.it/200x400" class="user">

＆＃13;

Answer 2

将图像设置为背景，居中。

<div class="image"></div>

的CSS：

.image{
  width: 300px;
  height: 300px;
  border-radius: 50%; /*don't forget prefixes*/
  background-image: url("path/to/image");
  background-position: center center;
  /* as mentioned by Vad: */
  background-size: cover;
}

fiddle

Answer 3

如果您正在使用引导程序，则可以使用img-circle类来完成此操作。

Answer 4

<html>  
<head>
<style>
#circle
{
border-radius:50% 50% 50% 50%;  
width:300px;
height:300px;
}
</style>
</head>
<body>
<img src="skin-tone.jpg"
id="circle">
</body>
</html>

如何在圈子中显示用户个人资料图片？

4 个答案:

`background-size`

`object-fit`