让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编辑  收藏  举报

导航