需求说明:背景图的图片高度过高,需要根据设备宽高显示图片,多余部分剪掉 / 不显示
尝试以下方法
一、通过 CSS:background-image
给 div 设置:background-size: cover;
效果分析:当设备宽高比例和图片宽高比例一致时,图片能够实现自适应;当设备宽高比例和图片宽高比例不一致时,图片中多出部分将不显示。因此可以自适应PC端,但是无法自适应移动端和 iPad
注意:使用 background-size: cover;
时需要带 position: absolute;
.img_box{
width: 100%;height: 100%;
background-image: url(../assets/img/bg01.png);
background-size: cover; /* 使图片平铺满整个浏览器(从宽和高的最大需求方面来满足,会使某些部分无法显示在区域中) */
position: absolute; /* 不可缺少 */
/* overflow: hidden; */
/* overflow: auto; */
z-index: -1;
background-repeat: no-repeat;
}
/* 注释部分要不要都一样 */
效果图:宽高比例相同
宽高比例不同:
二、通过 img 标签
给 img 标签动态绑定宽度(:width=“fullWidth”)
不足1:如果只设置动态获取的高度值,不设置宽度值,可想而知,图片宽度是无法铺满屏幕的,会出现留白部分
不足2:若是同时给图片宽度值,会使图片损失原有比例(因为强制了宽高),如果宽度相差不多的话,损失便不是很明显,没有强迫症或者严格要求也是可以采用的
目前找到的比较好的处理办法是:设置动态宽度 + position:fixed
/* 父级 register 设置动态宽高自适应屏幕大小 */
<div class="register" :height="fullHeight" :width="fullWidth">
<div class="img_box">
<img src="../assets/img/bg01.png" :width="fullWidth" />
</div>
</div>
img{
position: fixed; /* 固定图片位置 */
}
动态获取设备宽高的代码:
data(){
return{
fullWidth:document.documentElement.clientWidth
}
},
created(){
window.addEventListener('resize', this.handleResize)
},
beforeDestroy: function () {
window.removeEventListener('resize', this.handleResize)
},
methods: {
handleResize (event) {
this.fullWidth = document.documentElement.clientWidth
}
}
该代码参考自:https://blog.csdn.net/Little_Pig_Bug/article/details/88408445
效果图: