Vue Element UI 之背景图自适应屏幕(多种方法分析,含可取不可取) | 您所在的位置:网站首页 › css动态设置背景图片高度 › Vue Element UI 之背景图自适应屏幕(多种方法分析,含可取不可取) |
文章目录
一、通过 CSS:background-image方法一尝试:background-position: 0 0;
(OK)方法二尝试:background-size: cover;【可采用】二、通过 img 标签(OK)思路 1、img标签动态绑定宽度(:width="fullWidth")【可采用,较好】思路 2、在动态绑定宽度(:width="fullWidth")之后,想方法剪掉多余的高度方法1、给图片设置clip和position方法2、给img父级设置宽高和overflow【在设置固定值下,效果可采用】
思路 3、给图片加一个父级div,并进行以下设置【否定】
《 附上background-size的用法 》
需求说明:背景图的
图片高度过高,需要根据设备宽高动态显示图片大小,
多余部分剪掉 / 不显示
尝试以下方法: 一、通过 CSS:background-image 方法一尝试:background-position: 0 0;不足:需要给div一个固定的高度,不能实现动态高度 /* 需要加背景的div */ .register{ width: 100%; height: 1060px; /* 固定高度 */ background-image: url(../assets/img/bg1.png); background-position: 0 0; background-repeat: no-repeat; } (OK)方法二尝试: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; /* 不可缺少 */ z-index: -1; background-repeat: no-repeat; /* overflow: hidden; */ /* overflow: auto; */ } /* 注释部分要不要都一样 */效果图:宽高比例相同 宽高比例不同: 图片存在的问题:所选的图片宽度撑满时高度溢出,高度撑满时宽度不够 不足1:如果只设置动态获取的高度值,不设置宽度值,可想而知,图片宽度是无法铺满屏幕的,会出现留白部分 不足2:若是同时给图片宽度值,会使图片损失原有比例(因为强制了宽高),如果宽度相差不多的话,损失便不是很明显,没有强迫症或者严格要求也是可以采用的 目前找到的比较好的处理办法是:设置动态宽度 + position:fixed /* 父级 register 设置动态宽高自适应屏幕大小 */![]() 动态获取设备宽高的代码: 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 } }效果图: ![]() 效果图:图片损失了原有比例(因为强制了宽高) ![]() 效果图:宽度不足有空白区 ![]() 效果图:高度溢出,出现滚动条 不足:rect 的参数只有给设置固定值的时候才有效,动态宽高剪切无法实现 特点:position会使得其脱离文档流 overflow:hidden; 不足:只有给父级设置固定高度的时候才有效,动态高度无法实现 这里就不放效果图了 思路 3、给图片加一个父级div,并进行以下设置【否定】不足:背景图宽高无法同时达到要求,不能自适应PC端,亦不自适应 iPad 和 移动端 .img_box{ width: 100%;height: 100%; position: absolute; left: 0;top: 0; z-index: -1; } img{ height: 100%; left: 0;top: 0; }效果:宽高不能统一(宽度足够时,高度溢出;高度足够时,宽度不足),这里就不放图了 ———————————————————— 手动分割线 ———————————————————— 《 附上background-size的用法 》background-size 可以取以下的值: length:设置背景图像的高度和宽度,接收两个值。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。auto 即为默认,按照图片比例跟随相应的宽度/高度。 percentage:以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。 cover :把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 简言之,使图片平铺满整个浏览器(从宽和高的最大需求方面来满足,会使某些部分无法显示在区域中) contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。(当浏览器宽度/高度大于图片时,将会出现空白区域) |
CopyRight 2018-2019 实验室设备网 版权所有 |