您的位置：首页 > Web前端 > HTML

自适应布局下的图片垂直水平居中，自适应手机横竖屏

2017-06-15 10:17 876 查看
在html中最常用的功能也是最常见的问题就是图片在div中垂直水平居中问题。

当然水平居中很好办了，div下text-align:center就搞定了，当然前提是图片没有绝对布局。

现在越来越讲究响应式布局，屏幕适配。要求图片的宽高未知，div为全屏大小，横竖屏适应居中

下面就说博主亲测有效的一个方法

html 结构

<div class= "img_frame" id ="img_frame">
<div class= "center_tool"></div >
<img class= "image_large" src ="test .jpg">
</div>


css 结构

.img_frame .center_tool{
display: inline-block;
vertical-align: middle;
height: 100% ;
width: 0px ;
border: none ;
padding: 0px ;
margin: 0px 0px 0px -0.8rem ;
}
.img_frame{
width: 100% ;
height:100%;
overflow: hidden ;
white-space: nowrap;
}
.img_frame .image_large{
max-width:100% ;
max-height:100% ;
vertical-align: middle;
display: inline-block ;
margin-left: 0.3rem;
}


测试环境为手机浏览器，可自适应横屏竖屏

竖屏效果



横屏效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html 图片 布局 手机 自适应布局
相关文章推荐
新的分享
章节导航