美文网首页
pc官网首页banner图适配方案

pc官网首页banner图适配方案

作者: 变量只提升声明不提升赋值 | 来源:发表于2021-07-05 15:57 被阅读0次

    在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("移除");
      },
    

    相关文章

      网友评论

          本文标题:pc官网首页banner图适配方案

          本文链接:https://www.haomeiwen.com/subject/huhiultx.html