我正在尝试创建一个简单的div,其中将包含可以具有不同大小和比例的图像。不得拉伸或裁切图像,而必须将其垂直和水平居中。
.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%;
}
在第二张和第三张图片的顶部有那些微小的空间。有什么想法可以摆脱它们吗?
<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%;
}
这应该工作
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句