uni-app 页面中的背景图片高度和宽度自适应

直接上代码

.pages {width: 100%;height: 100%;background: url('@/static/image/index/bgi.png')  no-repeat center center fixed ;background-size: cover;box-sizing: border-box;
}

background 属性语法如下：
解释

参数1:图片路径
参数2:是否平铺
repeat:默认代表水平和垂直都平铺
no-repeat:代表不平铺
repeat-x:水平平铺
repeat-y:垂直平铺
参数3:图片位置 默认在0 0 或者说实在 left top
第一个值:水平位置 给具体的px值代表距离左边多少
第二个值:垂直位置 给具体的px值代表距离上边多少
还可以给百分比,代表图片的百分比要重叠在盒子的百分比那个位置上
给方向:
水平方向:left center right
垂直方向:top center bottom
参数4:图片大小 默认是图片大小
必须在参数3后面加一个
可以给具体的像素大小,还可以给百分比
还可以两个专业词语:
cover:有一部分没显示,覆盖的意思,代表图片一定要覆盖盒子,缩放后图片一定会只要一边缩放到了盒子内就停止缩放
contain:没变形,完全显示了,包含的意思,代表图片一定要被盒子包含,缩放后图要两边都缩放到盒子内才停止缩放
他们都是按比例缩放,不会变形
参数5:背景颜色

uni-app 页面中的背景图片高度和宽度自适应相关推荐

H5图片高度根据宽度自适应
每个图片原始宽高不一样,缩小每个图片到指定的宽度,高度等比例缩小,实现图片高度自适应. 下面看看实现代码: 下面是uniapp的条件编译,如果是小程序场景就使用 mode 属性实现高度自适应,如果是H ...
vue图片宽高自适应_div或img图片高度随宽度自适应的方法
该方法主要用来做网站自适应的,同时可以实现撑起内容高度,避免图片加载后导致的页面滚动. 一.可以使用js判断图片的宽度得到具体数值之后,再来利用js设置图片的高度(这里就不具体为大家细说了). 利用j ...
iOS固定图片高度，宽度自适应缩放
当后台返回一张图片,但没有返回图片宽高尺寸时,需要我们 APP 来处理自适应显示. 1.首页我们可以在图片下载完的回调里,计算宽高,然后自己计算比例进行缩放. 2.如果是图片是显示在 tablevie ...
Vue项目中设置背景图片
在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: backgroun ...
在vue中设置背景图片
在vue中设置背景图片在App.vue中将样式中默认的margin-top 改为0,使得页面顶部不留白 #app {font-family: 'Avenir', Helvetica, Arial, ...
Qt中添加背景图片的方法
Qt中添加背景图片的方法 QPalette的方法 #include #include int main(int argc, char *argv[]) { QApplication app(argc, ...
html表格中添加背景图片不平铺,如何在让Excel表格背景不平铺？
如何在让Excel表格背景不平铺? 时间:2016-06-09来源: 网络作者: 未知点击: 次 Excel技巧:如何在让Excel表格背景不平铺? 接上期<如何在Excel表格中插入背景图片& ...
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
vue+webpack创建的项目打包发布至服务器,页面空白及背景图片不显示问题解决一. 页面显示空白二. 背景图片不显示一. 页面显示空白解决方法: config > index.js ...
设置背景图片，解决手机上背景图片高度适应问题
设置背景图片,解决手机上背景图片高度适应问题第一种方法:直接对图片进行设置,代码如下 <img src="url" class="PhoneBack"& ...
echarts热力背景图_Echarts 图表中设置背景图片
在项目开发过程中,遇到在Echarts图表上添加背景图的需求,通过查找Echarts官网的配置项,发现 graphic 能够实现在图表中设置背景图片. image 在Echarts的实例中,找到一个实 ...

uni-app 页面中的背景图片高度和宽度自适应

uni-app 页面中的背景图片高度和宽度自适应相关推荐

最新文章

热门文章