• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > Div+Css >  小技巧:图片自适应正文

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

作者:网页模板
类型:图文教程
点击次数:
发布时间:2018-11-21 12:43
分享到:
网站上传图片时,如果不从后台限制图片的宽高,图片就会出现宽高大小不一,有的宽大于高,有的高大于宽,在前端如果再不进行限制,可能就会出现下面的情况:



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

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

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;
}
最终效果图:





(责任编辑:网页模板)
  • 本文标签:
  • css图片居中
利用text-align-last: center让select标签文字居中
没有下一篇