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