web开发中,经常会遇到图片居中显示的问题,如果图片的尺寸固定还好说,如果不固定,有的图片是宽度比较大,有的图片是高度比较大,碰到这种情况,UI就会和你说:“这个不行,我要居中的!”
抱着万马奔腾的心情,千幸万苦之后,找到了下面这种解决方案,只需要写点CSS
<span className="span">
<img
src=""
className="img"
alt=""
/>
</span>
.span {
display: inline-block;
width: 120px;
height: 120px;
}
.img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
}