css - 如何在圆形图像容器中保持非方形图像的尺寸

Question

我正在用户的个人资料中创建一个圆形头像，并打算将用户的图像设置在圆形头像容器中。

如果图片是正方形就不会有问题

但是，对于这个非正方形图像，我无法约束不是正方形图像的图像

我会得到这个结果

这是我使用的CSS代码

.avatar_container {
  display: inline-block;
  width: 25%;
  max-width: 110px;
  overflow: hidden;
}
.avatar_container img {
  border-radius: 50%;
}

怎样做才能一直保持圆圆的头像？而且里面的图像不会失真？应该 overflow hidden

Answer 1

更新:@grenoult 找到了一个链接，其中包含使用 css 转换的出色解决方案。这比我以前的解决方案更好，因为它允许您裁剪高和宽的图像。查看:http://jonathannicol.com/blog/2014/06/16/centre-crop-thumbnails-with-css/ .

旧答案:你想要做的是创建一个方形容器 div 并将 border-radius 放在上面。然后，调整图像大小以适合它。

HTML:

<div class="mask">
<img src="http://i.stack.imgur.com/MFao1.png" />
</div>​

CSS:

.mask {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

img {max-width: 100%;}

jsfiddle:http://jsfiddle.net/V2Xjy/