pc官网首页banner图适配方案

在banner图的设计上。应该将主要内容放在网站整体内容区域内。
比如，现在市面上普遍都是1200px的内容区域。那banner图最理想的状态就是内容在1200px之内，其余地方可以是一些不重要的配色啥的。
比如下面这样

image.png

在写代码的时候，我们给banner图1920的宽度写死。这样他就不会随着窗口的大小而变化，变形。但是在窗口变小的时候，他会超出屏幕。并且内容区域也不在屏幕中央。
这个时候就需要给父盒子超出隐藏， 并且通过定位让banner图的内容区域始终处于窗口内。
一下是样式代码

.swiper_box {  //父盒子
    width: 100%;
    height: 570px;
    overflow: hidden;
}

.swiper-container { //banner
    width: 1920px;
    height: 100%;
    position: relative;
    left: 50%;
    margin-left: -960px !important;   //图片宽度多少，就负一半
}

此方法会在屏幕缩小的时候将两边的留白给截掉。下面是效果

image.png image.png image.png

具体可以根据实际需求做调整

上面这种是banner图内容区域明确的情况下，还有些情况下可能需要完整的适配整个banner，也就是随着窗口的缩放，banner的宽高都要发生相应的变化
先看效果图

image.png

全屏

image.png

宽度减小，可以看到。图片的高度也相应减小了。

image.png

宽度在此减小，图片依然没有变形

实现步骤如下

这里用了elementui的轮播图组件，所以高度就卸载了组件上。重点就是 给父盒子活的高度。
banner图宽高百分百，让他继承父盒子。并且给img标签一个ref属性。后面会用到
 <el-carousel
        :height="imgHeight + 'px'"
        indicator-position="none"
        @change="imgChange"
      >
        <el-carousel-item v-for="(item, index) in swiperList" :key="index">
          <div class="sw_item">
            <img
              ref="img"
              :src="item.ad_code"
              @click="openNewPageChild(item.ad_link)"
            />
          </div>
        </el-carousel-item>
      </el-carousel>

 mounted() {
    this.imgLoad();
    // 监听窗口变化，使得轮播图高度自适应图片高度
    window.addEventListener("resize", () => {
      if (this.$refs.img[0]) {
        this.imgHeight = this.$refs.img[0].height;
      }
    });
  },
  methods: {
   imgLoad() {
      this.$nextTick(function () {
        // 获取窗口宽度*图片的比例，定义页面初始的轮播图高度
        this.imgHeight = (document.body.clientWidth * 1) / 2;
      });
    },
}
页面销毁后记得取消window的监听事件。以免页面报错。
  beforeDestroy() {
    window.removeEventListener("resize", () => {
      this.imgHeight = this.$refs.img[0].height;
    });
    console.log("移除");
  },