这几天在做项目的时候，后台小哥建议我把banner图那里改成img标签，不要用背景图的方式。这样方便他去做配置。
这里用img标签会带来一些问题：图片可能会被拉伸，并且无法居中显示。
为了解决这两个问题，需要在结构和样式上进行一些调整，记录如下：
HTML
<div class="banner__wrapper">
<!-- 这个div设置为宽度100%，并且溢出显示隐藏 -->
<div class="banner__inner">
<!-- 这个div设置为和img图片同样的宽高，并且用absolute定位设置为居中 -->
<div class="banner-img__wrapper">
<img src="https://dummyimage.com/1920X500">
</div>
</div>
</div>
css
.banner-img__wrapper {
position: absolute;
width: 1920px;
height: 500px;
left: 50%;
margin-left: -960px;
}
.banner__inner {
position: relative;
width: 100%;
overflow: hidden;
height: 500px;
}
效果在这里。
完。
