让image像背景图片一样,居中对齐,网页自适应

<div class="page4_content">
 <div class="page4_box">
  <div class="page_bg_16">
    <img src="fuka.jpg">
  </div>
 </div>
</div>

.page4_content{100%; height:200px;}
.page4_content .page4_box {
100%;
height: 100%;
left: 50%;
margin-left: -100%;
}
.page4_content .page4_box .page_bg_16{
display: block;
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;
auto;
margin: 0 auto;
text-align: center;
}

所遇到的问题:让图片像背景图片一样居中对齐。

思路:在img的外框的div上写200%;让image居中。然后针对image 的外框进行居中对其。

让图片根据高度自适应,宽度始终是居中的状态。宽度多余的部分隐藏

原文地址:https://www.cnblogs.com/shirleyjiang/p/11794144.html