微信小程序--图片Image几种mode 设置图片方法

2024-06-19 03:03:57

图片自适应i，并缩放的方法:

设置marrgin：0与padding：0（X）
样式设置：display：flex；（√）

widthFix

缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
最建议使用的图片缩放方式

mode: ‘scaleToFill’,

不保持纵横比缩放图片，使图片完全适应’

mode: ‘aspectFit’,

保持纵横比缩放图片，使图片的长边能完全显示出来’

mode: ‘aspectFill’,

保持纵横比缩放图片，只保证图片的短边能完全显示出来'。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

mode: ‘top’,

不缩放图片，只显示图片的顶部区域’

mode: ‘bottom’,

不缩放图片，只显示图片的底部区域’

mode: ‘center’,

不缩放图片，只显示图片的中间区域’

mode: ‘left’,

不缩放图片，只显示图片的左边区域’

mode: ‘right’,

不缩放图片，只显示图片的右边边区域’

mode: ‘top left’,

不缩放图片，只显示图片的左上边区域’

mode: ‘top right’,

不缩放图片，只显示图片的右上边区域’

mode: ‘bottom left’,

不缩放图片，只显示图片的左下边区域’

mode: ‘bottom right’,

不缩放图片，只显示图片的右下边区域'

更多查看微信开发文档：
https://developers.weixin.qq.com/miniprogram/dev/component/image.html

设置图片

一：本地图片

二：远程图片

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200105215050128.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDUzNTYy,size_16,color_FFFFFF,t_70

微信小程序--图片Image几种mode 设置图片方法相关推荐

微信小程序修改button为圆形按钮并设置图片
文章目录修改`button`默认样式设置背景色现在一般来说,用户没有授权时候,头像会显示一个默认图,点击时候出现授权页面.但是微信小程序授权功能现在只能用button设置,所以延伸出这个需求.实 ...
微信小程序开发的三种模式
摘要:截止到2018年6月底,正式上线发布的微信小程序已超过100万个.而越来越多的公司也已经在做微信小程序开发,许多人会觉得"微信小程序开发是开发者们的专利".答案是否定的,今天 ...
微信小程序开发的四种文件
最近在弄一个微信小程序,将看到的内容记录一下: 微信小程序中就四种类型的文件: js ---------- JavaScrip文件 json -------- 项目配置文件,负责窗口颜色等等 wxml ...
php轮播怎么调整图片大小,微信小程序内轮播图怎样设置成自适应高度
这次给大家带来微信小程序内轮播图怎样设置成自适应高度,微信小程序内轮播图怎设置成自适应高度的注意事项有哪些,下面就是实战案例,一起来看一下. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前 ...
微信小程序壁纸源码+自动采集小米图片
简介: 小程序内核里面对接的是小米壁纸,自动采集无需自己手动上传,而且可以搜索的内容很多,各种类型的壁纸图片都是有的. 搭建方法: 1,注册微信小程序,类目选工具_图片. 2,将源码导入开发者工 ...
uniapp微信小程序服务器与行内img src图片路径拼接
uniapp微信小程序服务器与行内img src图片路径拼接 1.在main.js 在行内直接引入运行就可以连接到服务器的图片了
微信小程序input框中加入小图标的实现方法
最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: ...
微信小程序view动态长度_微信小程序实现动态获取元素宽高的方法分析
本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuer ...
微信小程序跳转外部链接的详细实现方法
一.需求在微信小程序中跳转h5页面二.方法 1.新建页面用来承载网页如 outer页面 <web-view src="{{src}}"> </web-vie ...
微信小程序如何从数组里取值_微信小程序获取各种数据值跟设置数据值
微信小程序获取各种数据值跟设置数据值. 修改设置data数组中的某个值://小程序接收后台数据若为数组时,下标最好为默认索引数组,从0开始排序 var articleId ='1'//对应数组中的索引 ...

最新文章

热门文章