css:适合圆形(圆形)图像(不要拉伸)

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/

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