aspectFill：保留中部等比例变化

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

aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。

也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

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

不同的是，scaleToFill会改变图片的宽高比，而aspectFill不会。

用我们提到的“容器”的观点来理解aspectFill。

既然aspectFill一定要填满整个容器，那么首先要让这张图片的整体尺寸是小于这个容器的，就等比例放大图片（任意一边小于容器都需要放大，否则就会留下空白），让图片的某一边刚好接触容器的一边，同时另外一边又不会小于容器（可以超出，因为这一边会被截取）。

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

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

Widthfix：宽度为指定的高度依据原图的宽高比进行变化

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

Widthfix属性的最大特点是，图片将不会按照设定的尺寸呈现，比如设置image宽度为750px，高度为340px，如果设置mode=widthfix，则图片最终不会按照750px和340px呈现，除非原始图片切好是这个尺寸750px。

这个属性让宽缩放至指定尺寸750px，再动态计算高度，根据原始的快高比进行变化

<image class='sizeModal-img' src=' {{selected.image || spec.productFirstImage}}'></image>

之前的效果

修改之后代码如下：

<image class='sizeModal-img' mode='aspectFill' src=' {{selected.image || spec.productFirstImage}}'></image>

微信小程序图片控件的属性

注：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 不缩放图片，只显示图片的右下边区域

WeChat微信小程序image组件aspectFill：保留中部等比例变化 Widthfix：宽度为指定的高度依据原图的宽高比进行变化相关推荐

微信小程序 MinUI 组件库系列之 price 价格组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.小程序组件化框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础的组件 ...
微信小程序常用组件
欢迎体验个人小程序表情小作坊轻松定制表情包三连图文字转图片吃什么都行解决广大用户吃饭选择恐惧症的问题微信小程序的组件也挺多了,还是把官网的组件介绍地址先贴出来吧 https://mp.w ...
微信小程序image组件频闪问题
解决微信小程序image组件频闪问题文章目录解决微信小程序image组件频闪问题现象解决方案参考链接现象这个问题我知道原因很少见,造成的后果更加少见. 后台同事传了一张测试图片,图片大小 ...
微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照-后端为nodejs
在本文微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodej ...
微信小程序 scroll-view组件实现列表页实例代码
这篇文章主要介绍了微信小程序 scroll-view组件实现列表页实例代码的相关资料,scroll-view组件介绍scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端 ...
一步步教你实现微信小程序自定义组件
一步步教你实现微信小程序自定义组件更新时间:2022年03月21日 11:12:34 作者:naluduo233 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主 ...
微信小程序image组件开发程序以及相关图片问题参考资料汇总
微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...
小程序子组件向父组件传值_一套组件化、可复用、易扩展的微信小程序 UI 组件库...
如何使用 Wux Weapp 是一套组件化.可复用.易扩展的微信小程序 UI 组件库.在开始使用之前,需要先阅读微信小程序自定义组件的相关文档. 通过 npm 安装,需要依赖小程序基础库 2.2.1 ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...

WeChat微信小程序image组件aspectFill：保留中部等比例变化 Widthfix：宽度为指定的高度依据原图的宽高比进行变化

aspectFill：保留中部等比例变化

Widthfix：宽度为指定的高度依据原图的宽高比进行变化

微信小程序图片控件的属性

WeChat微信小程序image组件aspectFill：保留中部等比例变化 Widthfix：宽度为指定的高度依据原图的宽高比进行变化相关推荐

最新文章

热门文章

WeChat微信小程序image组件aspectFill：保留中部 等比例变化 Widthfix：宽度为指定的 高度依据原图的宽高比进行变化

aspectFill：保留中部 等比例变化

Widthfix：宽度为指定的 高度依据原图的宽高比进行变化

微信小程序图片控件的属性

WeChat微信小程序image组件aspectFill：保留中部 等比例变化 Widthfix：宽度为指定的 高度依据原图的宽高比进行变化相关推荐

最新文章

热门文章

WeChat微信小程序image组件aspectFill：保留中部等比例变化 Widthfix：宽度为指定的高度依据原图的宽高比进行变化

aspectFill：保留中部等比例变化

Widthfix：宽度为指定的高度依据原图的宽高比进行变化

WeChat微信小程序image组件aspectFill：保留中部等比例变化 Widthfix：宽度为指定的高度依据原图的宽高比进行变化相关推荐