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

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

Dispite @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;
}

Answer 3

Kai Qing建议尝试max-height也有助于包含。这允许您屏蔽不是正方形而没有失真的“源”图像。

http://jsfiddle.net/bw99N/2/

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

Answer 4

这篇文章有点老了，但是从人像或风景图像获得圆形图像的另一种方法是使用对象适配（现在支持，至少对于除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%;
}