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

Question

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

如果图片是正方形，则不会有问题。

然而，对于非正方形的图片，我无法限制图片的大小，比如这个非正方形的图片：

我会得到这样的结果：

以下是我使用的 CSS 代码：

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

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

- Zhen

---

你尝试过定义最大高度吗？ - Kai Qing

第二张图片的期望结果是什么？ - JimmyRare

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/

- alexvance

---

当您的图像也是横向大小时，该怎么办？http://jsfiddle.net/uk4p5h8m/ - Guillaume Renoult

@grenoult 我怀疑没有纯CSS的解决方案。使用JS，你可以检测图像是竖向还是横向，然后分别将其max-width或max-height设置为100%。 - alexvance

我发现这个链接对我的情况很有用：http://jonathannicol.com/blog/2014/06/16/centre-crop-thumbnails-with-css/ - Guillaume Renoult

@grenoult非常好！我会在我的回答中包含这个。 - alexvance

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

- M. Kloz

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

- Beat

Answer 4

尝试使用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%;
}

- Scott Wright