微信小程序中如何将图片铺满屏幕,作为背景图片
背景图片的制作
我相信有很多人和我一样,在制作背景图片是遇到了困难,比如图片为何显示扭曲,不是按给与图片大小显示的,又比如为何图片无法置顶显示,而是有一定的空间隔开等,在此我会演示如何制作一个背景图片,为初学者们解决这个烦恼。
首先我要介绍一下微信小程序中的图片标签【image】,这是一个神奇的标签,它是web中的【img】和背景图片的结合体,拥有强大的功能,由图可知【image】它是有默认的宽和高的,是320x240,这就是为什么我们刚插入的图片并不是原图片的大小的原因。
在图中我们可以看到一个陌生的属性【mode】,【mode】属性也是【image】标签强大的原因之一,它就是我们今天要学习的主角,它包括了缩放与裁剪于一身,其中包括了13种属性值,4种为缩放,9种为裁剪。
其中它有个缩放属性值为【widthFix】是我们制作背景图片的关键,它可以保持宽度不变,高度自动变化,保持图片宽高比不变,这就可以做到铺满屏幕。
最后我给大家展示一下代码:
1.WXML
2.WXSS
最后结果图为:
而不加【widthFix】的结果图为:
其中的对比十分明显,希望我的文章对大家有帮助,谢谢。
以上是本人对其的理解,可能会有一些错误存在,希望大家见谅,请多多指教。
微信小程序中如何将图片铺满屏幕,作为背景图片相关推荐
- 微信小程序中这么简单的设置页面背景图及字体颜色的方法,你还不会?
在微信小程序中,我们不免的要设置背景图片和字体颜色. 那怎么样才能做到简单的设置背景图片和字体颜色呢? 话不多说,直接开讲 首先先说怎么设置页面背景图片: 这是博主准备的照片. 下面是在wxml中的代 ...
- 微信小程序中自定义导航和地图定位
在健康码中,主要的难点技术就是在小程序中定位.自定顶部导航. 自定义导航 在微信小程序中,默认的顶部导航不能设置图片背景或者是透明背景,只能自定义导航. 在每一个页面中引入,就是得到自己定义[个性化的 ...
- html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
微信小程序中利用image组件实现图片手势缩放,前端大神严灏的牛文,讲解了微信小程序中image组件的三种是缩放模式,三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片. 原 ...
- 微信小程序中裁剪图片以及压缩到指定尺寸并上传
本文分为两个内容,分别是裁剪图片和压缩 引出问题 1.为何要裁剪图片 因为需要上传头像,但是每个型号的手机拍出来的照片尺寸都不太一样,不能统一,所以,希望在上传之前进行自主裁剪,保证上传到服务器上的尺 ...
- 微信小程序中的图片处理
微信小程序中的图片处理 微信小程序中的<image></image>用于向页面中插入图片.有两个重要的属性 1.src 要插入图片的资源地址 2.mode 图片裁剪.缩放 ...
- 微信小程序中进行图片压缩
微信小程序中进行图片压缩 问题: 一般情况下,小程序在进行拍照识别的时候,上传图片的大小会使小程序出现冗余,这个时候,为了减少小程序的冗余 并且使上传的图片可以分辨出该图片中的内容是那些内容,我们就需 ...
- 微信小程序中使用wxss加载图片并实现动画
微信小程序中使用wxss加载图片并实现动画 记录微信小程序中使用wxss加载图片并实现动画的方式,最终实现loading效果. 代码 .weui-loading { margin: 0 5px; wi ...
- 微信小程序中图片占满整个屏幕实现方法
将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦. 但是在微信小程序中,是没有dom对象的,根节点是page,使用pag ...
- 微信小程序setinterval_微信小程序中setInterval的使用方法
微信小程序中setinterval的使用方法 看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦 ...
最新文章
- 起底华为计算战略:十五年研发下苦功,三年连发10芯加速,目前2万工程师奋战...
- python爬虫如何从一个页面进入另一个页面-Python爬虫怎么获取下一页的URL和网页内容?...
- Smartforms 在sap系统设置纸张打印格式
- 数学概念——J - 数论,质因数分解
- 诗和远方:无题(五十一)
- linux rmp命令安装包在哪里_一文带你了解阿里云Linux服务器的基本操作
- 实现Ecshop商品跳到淘宝、京东等的购买链接
- 2017年校园招聘中国银行、中国邮政储蓄银行、中国移动笔试内容
- 为什么便利店晚上顾客很少?还要24小时营业?
- 从高考到程序员,一生无悔的选择,码农的成长之路
- 6-1 哈夫曼树及哈夫曼编码分数
- R-squared 和 Adjusted R-squared联系与区别
- 电烙铁焊锡到底有没有毒?
- Mysql基础篇(3)—— MySQL数据库类型
- 空气质量指数(AQI)分析与预测
- 看完这套书才发现,以前的四大名著都白看了!
- 基于java的滑雪场学具租赁管理系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署
- 工业CT分辨率——空间分辨率和密度分辨率
- C# 读取Excel转换为DataTable的几种常见方式及实现步骤
- 55家!6G概念、智能交通、智慧政务细分领域龙头全名单!(附市值)