首页 > 建站教程 > Div+Css >  小技巧:图片自适应宽度和高度垂直居中正文

小技巧:图片自适应宽度和高度垂直居中

网站上传图片时,如果不从后台限制图片的宽高,图片就会出现宽高大小不一,有的宽大于高,有的高大于宽,在前端如果再不进行限制,可能就会出现下面的情况:



图片变形了。那么,解决办法要么就是给个宽度不给高度,要么给高不给宽,超出裁切。

下面的代码实现了无论后端上传什么图片,都不会变形,并且居中完整显示:

1、html代码:
<ul>
    <li><img src="images/1.png /></li>
    <li><img src="images/2.png /></li>
</ul>
2、css代码:
li{
    width:300px;
    height:300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

img{
    max-width:100%;
    max-height: 100%;
    width:auto;
    height: auto;
}
最终效果图: