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

Question

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

如果图像是正方形,则不会出现问题

然而,例如对于该非方形图像,我不能约束不是正方形图像的图像

我会得到这个结果

这是我正在使用的CSS代码

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

我该怎么做才能始终保持圆形化身？并且其中的图像不会被扭曲？应该隐藏溢出

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/

Answer 2

这篇文章有点旧，但是从纵向或横向图像中获得圆形图像的另一种选择是使用 object-fit（现在支持，至少对于除 IE 之外的所有浏览器中的 img 标签）。

HTML

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

CSS

img{
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
}

Answer 3

尽管@alexvance已经提供了该有用的链接，但我将添加整个代码以确保在链接断开后仍保留该代码。

例

的HTML

<div class="thumbnail">
  <img src="landscape-img.jpg" alt="Image" />
</div>
<div class="thumbnail">
  <img src="portrait-img.jpg" class="portrait" alt="Image" />
</div>

的CSS

.thumbnail {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
  width: 100%;
  height: auto;
}