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

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 并将边框半径放在上面。然后，调整图像大小以适合它。

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 已经给出了那个有用的链接，我将添加整个代码以确保它在链接断开后仍然存在......</p>

例子

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 4

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%;
}