如何在不拉伸的情况下将图像放入圆圈中？

Question

例如我有这样的图片：

和CSS：

 .company-header-avatar{
    width: 60px;
    height: 60px;
    -webkit-border-radius: 60px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 60px;
    -moz-background-clip: padding;
    border-radius: 60px;
    background-clip: padding-box;
    margin: 7px 0 0 5px;
    float: left;
}

结果我得到：

但他们被拉长了。有什么方法可以使它们变圆而不拉伸吗？ （例如，从中间获取部分等）

小提琴：

http://jsfiddle.net/73h7try9/

原文由 brabertaser19 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我建议将带有 background-image 的图像应用到一个 div，然后应用 background-size: cover 以确保无论图像的原始大小/比例如何，比例都保持正确：

JS小提琴

HTML

 <div class="company-header-avatar" style="background-image: url(https://dl.dropboxusercontent.com/u/59666091/6E06C3D.jpeg)"></div>

<div class="company-header-avatar" style="background-image: url(https://dl.dropboxusercontent.com/u/59666091/8WluhcUlWl8.jpg)"></div>

CSS

 .company-header-avatar{
    width: 60px;
    height: 60px;
    -webkit-border-radius: 60px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 60px;
    -moz-background-clip: padding;
    border-radius: 60px;
    background-clip: padding-box;
    margin: 7px 0 0 5px;
    float: left;
    background-size: cover;
    background-position: center center;
}

原文由 Derek Story 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这为我做了工作。

 .company-header-avatar{
  height: 60px;
  width: 60px;
  object-fit: contain;
  border-radius: 50%;
}

原文由 Kundan 发布，翻译遵循 CC BY-SA 4.0 许可协议