banner高度固定，宽度改变时图片居中显示效果实现

来源：https://blog.csdn.net/shipeng22022/article/details/72778030

<div class="banner">
    <img src="image/banner.jpg" />
</div>

.banner{
  width: 100%; height: 450px; position: relative;
  img{ width: 1920px; height: 100%; display: block; position: absolute; left: 50%;
    margin-left:calc(-1920px/2); }
}

使用swiper页面宽度缩放时，图片始终保持居中
参考链接：https://www.qietujiang.com/swiper-banner-ju-zhong.html

将父容器设置相对定位，再将图片本身先绝对定位，并向左偏移50%，再使用margin-left为负值的方式向右偏移图片自身宽度的一半，以达到绝对居中的效果。这样实现的效果，当逐渐缩小浏览器视图宽度时，图片的核心焦点区始终是在核心位置的。

.swiper {
    width: 100%;
    height: 480px; 
    float: left; 
    overflow: hidden; 
    position: relative;
}
.swiper-slide{ 
    position: relative; 
    overflow: hidden;
}
.swiper-slide img{ 
    width: 1920px; 
    display: inline-block; 
    position: relative;
    left: 50%; 
    margin-left: -960px;
}