我正在尝试创建一个简单的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%;
}
第二张和第三张图片的顶部有一些微小的空间。我有什么想法可以摆脱它们吗?
答案 0 :(得分:1)
<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%;
}
这应该有效
答案 1 :(得分:0)
将图像设置为div背景,如下所示
<div class="circleImage" style="background: url('https://placehold.it/350x350'); background-size: cover;">
现在图像非常适合div。
答案 2 :(得分:0)
将width
上的height
和.circleImage img
增加到105%。