html - 没有调整大小/裁剪/拉伸(stretch)的圆形图像

Question

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

目前我遇到了这个问题: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%;
}

这应该有效