圆角图像，无需调整大小/裁剪/拉伸

Question

我正在尝试创建一个简单的div，它将包含可以具有不同大小和比例的图像。 图像不应拉伸或裁剪，必须垂直和水平居中。

目前我坚持这个：JSFiddle

.circleImage {    
    height: 100px;      /* equals max image height */
    width: 100px;
    white-space: nowrap;    
    text-align: center;   
    line-height: 100px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    overflow: hidden;
    border: solid 1px grey;
}

.circleImage img{
    vertical-align: middle;
    max-height: 100%;
    max-width: 100%;
}

第二张和第三张图片的顶部有一些微小的空间。我有什么想法可以摆脱它们吗？

Answer 1

http://jsfiddle.net/k7fpz8be/

<div class="circleImage">
    <span class="helper"></span><img src="https://placehold.it/350x150" alt"logo" title="landscape" />
</div>
<br />
<div class="circleImage">
    <span class="helper"></span><img src="https://placehold.it/350x350" alt"logo" title="square" />
</div>
<br />
<div class="circleImage">
    <span class="helper"></span><img src="https://placehold.it/150x350" alt"logo" title="portrait" />
</div>


.circleImage {
    height: 100px;      /* equals max image height */
    width: 100px;
    border: 1px solid grey;
    white-space: nowrap;
    border-radius:50px;
    text-align: center;
    overflow:hidden;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.circleImage img {
    vertical-align: middle;
    max-height: 100%;
    max-width: 100%;
}

这应该有效

Answer 2

将图像设置为div背景，如下所示

<div class="circleImage"   style="background: url('https://placehold.it/350x350');  background-size: cover;">

现在图像非常适合div。

Answer 3

将width上的height和.circleImage img增加到105％。

http://jsfiddle.net/qLfxb3nh/2/