微信小程序image组件中aspectFill和widthfix模式应用详解

aspectFill 与 widthfix 都是保持宽高比不变

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

aspectFill同样保持图片的宽高比不会变形。但它让图片完全填满整个容器,类似于scaleToFill这种模式。不同的是,scaleToFill会改变图片的宽高比,而aspectFill不会。

用我们提到的“容器”的观点来理解aspectFill。既然aspectFill一定要填满整个容器,那么首先要让这张图片的整体尺寸是大于这个容器的,就等比例放大图片(任意一边小于容器都需要放大,否则就会留下空白),让图片的某一边刚好接触容器的一边,同时另外一边又不会小于容器(可以超出,因为这一边会被截取)。

如果原始尺寸大于容器,则需要等比例缩小,缩小的要求同样是一边刚好接触容器,另外一边要等于或者超出容器。。这样就保证了图片可以完全填满整个容器,但某一边要发生截取。那么问题来了,如何截取?在超出容器的这一边上,是保留图片的上部、中部还是下部?答案是:中部。

那么把代码设置为mode=aspectFill的效果,把原始图片的中间部分保留下来。

Widthfix 宽度不变,高度自动变化,保持原图宽高比不变。

Widthfix属性的最大特点是,图片将不会按照设定的尺寸呈现,比如设置image宽度为750px,高度为340px,如果设置mode=widthfix,则图片最终不会按照750px和340px呈现,除非原始图片切好是这个尺寸。这个属性让宽缩放至指定尺寸,再动态计算高度,如图所示。

别的例子之前代码如下:

<image class='sizeModal-img' src=' {{selected.image || spec.productFirstImage}}'></image> 
之前的效果

修改之后代码如下:

<image class='sizeModal-img' mode='aspectFill' src=' {{selected.image || spec.productFirstImage}}'></image> 
添加上述代码之后效果
以下是微信小程序图片控件的属性说明
image

图片。

属性名类型默认值说明最低版本
srcString 图片资源地址 
modeString'scaleToFill'图片裁剪、缩放的模式 
lazy-loadBooleanfalse图片懒加载。只针对page与scroll-view下的image有效1.5.0
binderrorHandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'} 
bindloadHandleEvent 当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

注:image组件默认宽度300px、高度225px

mode 有效值:

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

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



转载于:https://www.cnblogs.com/FineDay/p/9192311.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/427598.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

poj 2255 Tree Recovery 解题报告

分享一下我老师大神的人工智能教程&#xff01;零基础&#xff0c;通俗易懂&#xff01;http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识&#xff0c;造福人民&#xff0c;实现我们中华民族伟大复兴&#xff01;题目出处题意&#xff1a;输入两组数据&…

个人作业5——软件工程总结

一、请回望开学时的第一次作业&#xff0c;你对于软件工程课程的想象 对比开篇博客你对课程目标和期待&#xff0c;“希望通过实践锻炼&#xff0c;增强计算机专业的能力和就业竞争力”&#xff0c;对比目前的所学所练所得&#xff0c;在哪些方面达到了你的期待和目标&#xff…

SpringBoot在项目中基本配置设置

1、新增过滤器 &#xff08;1&#xff09;配置 WebFilter(filterName "corsFilter") public class CorsFilter extends OncePerRequestFilter {Overrideprotected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain ch…

C符号之逻辑运算符 左移与右移 自增自减

分享一下我老师大神的人工智能教程&#xff01;零基础&#xff0c;通俗易懂&#xff01;http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识&#xff0c;造福人民&#xff0c;实现我们中华民族伟大复兴&#xff01;本篇文章将总结C中一些比较有趣的符号逻辑运…

年轻的工程师如何月入伍万XD

郑昀&#xff1a;你要跟谁比&#xff1f;关键词&#xff1a;成长&#xff0c;自我管理&#xff0c;自我激励&#xff0c;面试&#xff0c;候选人201806 ——你觉得跟你的 Leader 差在什么地方&#xff1f;——肯定有差距&#xff0c;一个是知识面不如他广&#xff0c;二一个是解…

字符串翻转

分享一下我老师大神的人工智能教程&#xff01;零基础&#xff0c;通俗易懂&#xff01;http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识&#xff0c;造福人民&#xff0c;实现我们中华民族伟大复兴&#xff01;《递归入门》字符串翻转&#xff1a;将字符串…

Java学习之SpringBoot整合SSM Demo

背景&#xff1a;在Java Web中Spring家族有着很重要的地位&#xff0c;之前JAVA开发需要做很多的配置&#xff0c;一堆的配置文件和部署调试一直是JavaWeb开发中的一大诟病&#xff0c;但现在Spring推出了SpringBoot&#xff0c;提供了快速单机部署调试和注解配置的便利。作为一…

Java别说取余( )运算简单,你真的会吗

一&#xff0c;直击现场下面我来抛出几道题&#xff1a; 说明m是商&#xff0c;n是余数&#xff1b; &#xff08;1&#xff09;正数%正数 3%2m…….n 2%3m…….n (2)正数%负数或者负数%正数 -3%2m…….n 3%-2m…….n -2%3m…….n 2%-3m…….n (3)负数%负数 -3%-2m…….n -2%-3…

centos6 5从命令行进入图形界面

一&#xff0c;安装图形界面包组 yum groupinstall “Desktop” -y yum groupinstall “X Window System” -y之所以加 -y 是为了一会安装的时候不用再确认了。不加-y也行。不过一会儿有可能有很多选项需要你确认&#xff1b;二&#xff0c;进入图形界面 startx从图形界面到命令…

decimal这个数据类型的用法,保证你看懂

笔者在网上搜了好久&#xff0c;解释都晦涩难懂。最后通过亲手实践加课本知识得出结论如下&#xff1a; decimal(M,N) M表示:不包括小数点&#xff0c;不包括符号位&#xff0c;所能存数字的总位数&#xff08;包括小数部分和整数部分&#xff09; N表示&#xff1a;小数部分…

前端与后端接口的交互案例

一、案例描述1&#xff0c;前端页面提供用户名&#xff0c;密码输入框。 2&#xff0c;通过Ajax发送请求到后端Serlvet。 3&#xff0c;后端Serlvet处理请求&#xff0c;根据输入的用户名和密码返回给前端不同信息前端访问后端接口通过后端提供的的URL二、主要代码1、前端页面&…

20172301 2017-2018-2《程序设计与数据结构》课程总结

20172301 2017-2018-2《程序设计与数据结构》课程总结 每周作业链接汇总 预备作业1 简要内容:对上学期的认识和总结&#xff0c;对专业和老师的期望。预备作业2 简要内容:关于技能和学习技能经验。预备作业3 简要内容:安装虚拟机和Linux命令学习。第一周作业 简要内容: 计算机系…

软链接和硬链接到底有啥作用和区别

前言&#xff1a;在网上搜索了好久&#xff0c;看了很多博客&#xff0c;某度知道等等。关于软硬链接的解释都太模糊&#xff0c;还有什么i节点&#xff0c;跨分区根本弄不明白&#xff0c;在查阅了书籍和询问老师后决定自己写一篇简单的博文&#xff0c;然初学者都能够明白的博…

python执行gradle脚本

1 import os2 import shutil3 import subprocess4 5 #拷贝文件6 def copyFile(srcFile, dstFile):7 #检查源文件是否存在8 if not os.path.isfile(srcFile):9 print(%s not exist % srcFile) 10 return False 11 #如果目的路径不存在创建目录 12 …

redis 批量删除操作

redis 原生删除方法 del key1 key2 ... 只支持显示删除 使用*通配符 和 xargs可以很方便地进行批量删除 形式如下&#xff1a; redis-cli -h 192.168.1.45 -p 6379 keys "*" | xargs redis-cli -h 192.168.1.45 -p 6379 -n 6 del *通配符&#xff1a;匹配所有字符 补…

c语言怎么做到四舍五入

一&#xff0c;总结如下这里笔者就不谈Math.h中的round()函数了。它是可以做到的&#xff0c;但是据说这个函数和编译器有关系。所以在这里就不介绍了。 我的方法很简单&#xff1a;#include<stdio.h> int main(){ double d1,d2,d3; d1-3.1415926; d2(int)(d1*1…

c++ 的makefile文件实例

首先声明&#xff0c; 感谢九哥的帮助&#xff0c;因为从来没写过makefile&#xff0c; 所以一直是手动编译&#xff0c; 然后有一次写了三个文件&#xff0c; 需要编译&#xff0c; 而我只编译了一个文件&#xff0c; 所以一直出错&#xff0c; 九哥告诉我用makefile更方便&am…

操作系统短作业优先(SJF)调度算法

一&#xff0c;算法代码#include<stdio.h>struct sjf { //定义进程的结构体 char name[10];//进程名 float arrivetime;//到达时间 float servicetime;//服务时间 float starttime;//开始时间 float finishtime;//完成时间 float zztime; //周转时间 …

git add -A 、git add -u 、 git add . 三种区别

git add -A 提交所有变化 git add -u 提交被修改(modified)和被删除(deleted)文件&#xff0c;不包括新文件(new) git add . 提交新文件(new)和被修改(modified)文件&#xff0c;不包括被删除(deleted)文件 转载于:https://www.cnblogs.com/php08049/p/9214175.html

操作系统进程调度先来先服务FCFS

一&#xff0c;实验的流程图二&#xff0c;实验代码注&#xff1a;本代码主要来自豆丁&#xff0c;加入本人的部分修改。。//本FCFS是用不带都结点的链表完成。当然也可以用其他数据结构 #include<stdio.h>#include<stdlib.h>typedef struct PCB //定义进程控…