这几天在做项目的时候，后台小哥建议我把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;
}

效果在这里。

---

完。