微信小程序,图片mode属性详解

2023-11-04

<image src="photo.png" mode="widthFix"></image>

mode 有效值:mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。

模式 值 说明
缩放 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
缩放 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
缩放 aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
缩放 widthFix 宽度不变,高度自动变化,保持原图宽高比不变

裁剪 top 不缩放图片,只显示图片的顶部区域
裁剪 bottom 不缩放图片,只显示图片的底部区域
裁剪 center 不缩放图片,只显示图片的中间区域
裁剪 left 不缩放图片,只显示图片的左边区域
裁剪 right 不缩放图片,只显示图片的右边区域
裁剪 topleft 不缩放图片,只显示图片的左上边区域
裁剪 top right 不缩放图片,只显示图片的右上边区域
裁剪 bottom left 不缩放图片,只显示图片的左下边区域
裁剪 bottom right 不缩放图片,只显示图片的右下边区域
————————————————
版权声明:本文为CSDN博主「钟Bubble」的原创文章
原文链接:https://blog.csdn.net/BubbleABC/article/details/126138998

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序,图片mode属性详解 的相关文章

  • OpenCV实现人脸识别

    该程序对头像很小的图片效果不是很好 VS2017 OpenCV3 5 主要步骤 1 读取图像 2 转为灰度图 3 直方图均衡化 增加对比度 4 载入分类器 5 检测关于脸部位置 include
  • 地形平滑算法

    地形平滑算法 2013 06 20 18 33 2486人阅读 评论 0 收藏 举报 分类 OGRE 41 C C 10 版权声明 本文为博主原创文章 未经博主允许不得转载 拉出来的地下不平滑怎么办 笨办法就是美工一个顶点一个顶点的调整 而
  • AWB实现流程

    简介 本篇谈论下对AWB算法的调查和预研工作 内容概述 所谓AWB也就是自动白平衡的意思 白平衡在相机中很常见 主要是和色温 色彩还原 色调调整相关 当白平衡设置不佳的时候 常会出现如下这些情况 在日光灯的房间里拍摄的影像会显得发绿 在室内
  • UE5项目打包发布Windows需要安装插件

    一 下图为UE5项目打包发布Windows的安装路劲 前面感叹号为未安装插件 二 打包前的其他可有可无设置 1 编辑Edit 项目设置Project Settings 2 平台Platforms Windows 三 安装路径 1 搜索vis
  • 群晖(docker图形化界面)使用 SpeedTest 测速

    群晖 docker图形化界面 使用 SpeedTest 测速 博主博客 https blog uso6 com https blog csdn net dxk539687357 本文主要介绍在群晖中安装 speedtest 进行网络测速 一
  • 会话跟踪技术:会话Cookie,URL重写和HttpSession

    一 会话跟踪 session tracking 技术 会话是客户端发送请求 服务器返回响应的连接时间段 HTTP是无状态协议 每次都是单独连接 不能维持客户的上下文信息 会话跟踪技术是用于维持客户端和服务器端通信信息的技术 三种典型客户端会
  • 云计算介绍之云计算存储(1)

    文章目录 云计算存储 1 存储架构 1 1存储概念 1 2系统组成 1 系统硬件 2 存储软件 3 存储方案 1 3存储分类 1 3 1 开放系统的存储 1 外挂存储 a Fabric Attached Storage 网络存储 FAS 1
  • TinyPerson数据集json文件改写为xml文件

    TinyPerson NWPU VHR 10或其他同理 数据集文件改写为VOC类型的xml文件 代码转python实现 创作不易 点个赞吧 文章目录 TinyPerson NWPU VHR 10或其他同理 数据集文件改写为VOC类型的xml
  • CentOS 6.3下rsync服务器的安装与配置

    一 rsync 简介 Rsync remote synchronize 是一个远程数据同步工具 可通过LAN WAN快速同步多台主机间的文件 也可以使用 Rsync 同步本地硬盘中的不同目录 Rsync 是用于取代rcp的一个工具 Rsyn

随机推荐

  • WINDOWS SERVER 2012证书服务安装配置

    WINDOWS SERVER 2012证书服务安装配置 首先需要下载一个windows server 2012的镜像 安装虚拟机 来进行证书服务安装之前的准备 在进行安装证书服务之前 首先应该安装配置域服务 否则安装证书服务无法正常安装配置
  • python好学吗?0基础学习python需要那些准备

    Python是一种计算机程序设计语言 你可能已经听说过很多种流行的编程语言 比如非常难学的C语言 非常流行的Java语言 适合初学者的Basic语言 适合网页编程的JavaScript语言等等 那Python是一种什么语言 首先 我们普及一
  • kubernetes1.20版本启用ipvs模式

    在1 19版本之前 kubeadm部署方式启用ipvs模式时 初始化配置文件需要添加以下内容 apiVersion kubeproxy config k8s io v1alpha1 kind KubeProxyConfiguration f
  • (css样式穿透详解)::v-deep的使用

    目录 背景 使用 1 当项目中使用的 css 原生样式 需要使用 gt gt gt 深度选择器来修改 外用第三方组件的样式 2 当项目中使用的 css 扩展语言是 less 需要使用 deep 或者 v deep 深度选择器来修改 外用第三
  • TypeScript超详细入门教程(上)

    TypeScript超详细入门教程 上 01 开篇词 Hello TypeScript 01 开篇词 Hello TypeScript 更新时间 2019 10 30 13 49 46 既然我已经踏上这条道路 那么 任何东西都不应妨碍我沿着
  • ios申请真机调试( xcode 5)详细解析

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 已经有开发证书的直接跳过第一步 第一步 申请 开发证书 进入苹果开发者99美元账号 选择 Certificates Identifiers Profiles 关于 Cert
  • BTC-协议

    防范 double spending attack Distribute consensus distributed hash table 分布式共识 FLP impossibility result 在一个异步的系统里 网络时延没有上限
  • cython优化代码过程问题及解决总结

    1 同样cdef的矩阵还是在Python平台 还是黄色 源 问题 解决1 2 3 1 加上修饰符 cython boundscheck False cython wraparound False 2 数组索引方式 注意这里nodePot0是
  • avue 表单远程搜索、模糊查询

    关于avue的模糊下拉 直接上代码 computed option return emptyBtn false submitBtn false menuSpan 8 menuBtn false column label 经销商名称 labe
  • 编译原理------词法分析器C/C++代码实现

    一 实验目的 设计 编制并调试一个词法分析程序 加深对词法分析原理的理解 二 实验内容 2 1 待分析的简单的词法 1 关键字 begin if then while do end 所有的关键字都是小写 2 运算符和界符 lt lt lt
  • 剑指 Offer 11. 旋转数组的最小数字、12.矩阵中的路径

    剑指 Offer 11 12 旋转数组的最小数字 思路 矩阵中的路径 回溯法 旋转数组的最小数字 旋转数组的最小数字 思路 就是找旋转点 二分查找 去除两端的元素 package swordPointingToTheOffer public
  • java实现敏感字过滤工具类

    实现敏感字的过滤思路 1 读取敏感词库 2 确认字符串中是否有敏感词库中的敏感词 以下提供判断是否有敏感词的方法boolean checkSenstiveWord 和将敏感词转换为 字符的方法String filterInfoAfter 工
  • 如何给Winform 的Panel控件添加滚动条

    真是太笨了 刚想起来 Panel控件还有一个AutoScoll属性 直接修改为true即可 添加Panel控件的如下两个事件即可 当然 只是添加的竖向滚动条 横向滚动条只需把VerticalScroll改为HorizontalScroll即
  • Promise学习笔记

    目录大纲 一 初识Promise 1 Promise是什么 2 什么时候使用Promise 3 Promise的基本用法 二 Promise的实例方法 1 then方法 2 使用Promise解决回调地狱问题 3 catch 4 了解fin
  • Linux查看进程的内存占用情况

    1 top top命令是Linux下常用的性能分析工具 能够实时显示系统中各个进程的资源占用状况 类似于Windows的任务管理器 内容解释 PID 进程的ID USER 进程所有者 PR 进程的优先级别 越小越优先被执行 NInice 值
  • C++基础——函数重载

    目录 一 函数 重载的三种形式 1 参数个数不同的重载函数 2 类型上的不同重载函数 3 类型顺序上的不同重载函数 二 函数重载 缺省参数 返回值不同 能不能构成函数重载 重载 重新赋予意义 可以认为是一词多义 例如 算账 基本义是计算账目
  • 【黑科技】:AI 图片无损放大工具 果核图片放大

    分享两款图片AI放大工具 果核图片放大 和 AI Lossless Zoomer 两者并没有太大的区别 两款应用使用的算法都是实用的来自腾讯ARC实验室的Real ESRGAN 目前这个模型主要来源人像 所以对人物的处理效果会更加明显 图片
  • matlab如何残差分析图,利用matlab绘制类似拟合、残差图(需手工合并)

    对股票软件比较熟悉的同学都知道经常会看到这样的界面 上图显示的是股价的运行 下图显示的是一些技术指标 坐标轴可以不同向 因而考虑用matlab绘制如上面所示的图形 function fit plot x y real y fit 绘制拟合
  • ftp文件在服务器的什么位置,ftp文件服务器上传后的文件在哪

    ftp文件服务器上传后的文件在哪 内容精选 换一换 从本地上传日志文件 是指从浏览器所在机器选择日志文件并上传 目前只支持选择 log的日志文件 如果日志文件中包含其他格式文件 则导入时会提示格式错误 如图2所示 单击Upload 则只会上
  • 微信小程序,图片mode属性详解