不调整大小/裁剪/拉伸的圆形图像答案

【问题标题】：Rounded image without resizing/cropping/stretching不调整大小/裁剪/拉伸的圆形图像
【发布时间】：2015-08-19 14:56:09
【问题描述】：

我正在尝试创建一个简单的 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%;
}

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

【问题讨论】：

不能在 jsfiddle 上工作。图片损坏
@Tushar 不明白你的意思。对我来说，它在 jsfiddle 上按预期工作
也许，vertical-align: top; 用于图像

标签： html image css alignment

【解决方案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%;
}

这应该可行

【讨论】：

【解决方案2】：

如下设置图片为div背景，

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

现在图像完全适合 div。

【讨论】：

为此，我需要更改每个图像的div-元素的样式属性。我只需要我的img-tag 的包装器

【解决方案3】：

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

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

【讨论】：