Vue Element UI 之背景图自适应屏幕(可取的方法) | 您所在的位置:网站首页 › web中背景图片怎么设置大小一致的 › Vue Element UI 之背景图自适应屏幕(可取的方法) |
需求说明:背景图的图片高度过高,需要根据设备宽高显示图片,多余部分剪掉 / 不显示 尝试以下方法 一、通过 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 设置动态宽高自适应屏幕大小 */ 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 效果图: |
CopyRight 2018-2019 实验室设备网 版权所有 |