让image像背景图片一样,居中对齐,网页自适应
<div class="page4_content">
<div class="page4_box">
<div class="page_bg_16">
<img src="fuka.jpg">
</div>
</div>
</div>
.page4_content{width:100%; height:200px;}
.page4_content .page4_box {
width: 100%;
height: 100%;
left: 50%;
margin-left: -100%;
}
.page4_content .page4_box .page_bg_16{
display: block;
width: 200%;
height: 100%;
overflow: hidden;
position: absolute;
text-align: center;
}
.page4_content .page_bg_16 img, .page4_content .page_bg_4 img {
height: 100%;
display: inline-block;
width: auto;
margin: 0 auto;
text-align: center;
}
所遇到的问题:让图片像背景图片一样居中对齐。
思路:在img的外框的div上写200%;让image居中。然后针对image 的外框进行居中对其。
让图片根据高度自适应,宽度始终是居中的状态。宽度多余的部分隐藏
posted on 2019-11-04 19:27 ShirleyJiang 阅读(938) 评论(0) 编辑 收藏 举报