小程序image组件自适应宽高比

先撸为敬：
1s后

<image src="{{item}}" mode="widthFix"></image>

aspectFill：aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
aspectFill同样保持图片的宽高比不会变形。但它让图片完全填满整个容器，类似于scaleToFill这种模式。
不同的是，scaleToFill会改变图片的宽高比，而aspectFill不会。
用我们提到的“容器”的观点来理解aspectFill。既然aspectFill一定要填满整个容器，那么首先要让这张图片的整体尺寸是大于这个容器的，就等比例放大图片（任意一边小于容器都需要放大，否则就会留下空白），让图片的某一边刚好接触容器的一边，同时另外一边又不会小于容器（可以超出，因为这一边会被截取）。如果原始尺寸大于容器，则需要等比例缩小，缩小的要求同样是一边刚好接触容器，另外一边要等于或者超出容器。。这样就保证了图片可以完全填满整个容器，但某一边要发生截取。那么问题来了，如何截取？在超出容器的这一边上，是保留图片的上部、中部还是下部？答案是：中部。
Widthfix：宽度不变，高度自动变化，保持原图宽高比不变。Widthfix属性的最大特点是，图片将不会按照设定的尺寸呈现，比如设置image宽度为750px，高度为340px，如果设置mode=widthfix，则图片最终不会按照750px和340px呈现，除非原始图片切好是这个尺寸。这个属性让宽缩放至指定尺寸，再动态计算高度。

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

小程序image组件自适应宽高比相关推荐

微信小程序——image图片自适应宽度比例显示的方法
微信小程序的组件image是用来显示图片的,它有一下几个属性: 1.src 图片资源地址 2.mode 图片裁剪.缩放的模式 3.binderror ...
微信小程序image组件开发程序以及相关图片问题参考资料汇总
微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...
小程序富文本自适应屏幕_自适应文本：跨屏幕尺寸构建可读文本
小程序富文本自适应屏幕 Many of you may already know about responsive web design. Cited from Wikipedia, respons ...
微信小程序swiper高度自适应方法
小程序swiper高度自适应 data: {//图片hdimg: [],//是否采用衔接滑动circular: true,//是否显示画板指示点indicatorDots: false,//选中点的颜 ...
微信小程序____小程序的组件用法与HTML5标签的区别
熟悉一门开发语言或是一种框架,除了了解它的基本语法.基本控件.基本属性之外,最好的方式莫过于追根溯源,与同类型的.自己熟悉的语言比较并了解它的异同,这样才能更好的去理解并记忆. 下面我们先探究下它们之 ...
微信小程序的组件用法与传统HTML5标签的区别
小程序与传统HTML5的区别小程序刚开放公测,互联网圈内开始了各种解读和猜测.其中有观点认为小程序和HTML5有着紧密关联,甚至小程序就是基于HTML5开发. 经过仔细研究文档和代码开发,从视图层的 ...
微信小程序电子签名组件
微信小程序电子签名组件,封装抽离可复用,签名成功输出base64和临时文件路径,解决vant弹窗中使用导致背景滚动问题,宽度自适应,高度设置百分比,开箱即用! 文章目录一.效果图二.组件完整代码示 ...
swiper高度自适应_微信小程序swiper高度自适应
微信小程序swiper高度自适应的实现方式,首先swiper默认最小高度150,下面请看开发实例. 要求:swiper高度自适应 wxml wxss .swiper image { width: 10 ...
微信小程序swiper高度自适应，swiper的子元素高度不固定
小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...
微信小程序_map组件实现定位
微信小程序_map组件实现定位 map组件这是官方提供的地图组件,很多复杂的功能我暂时没有接触到,而且有的效果似乎只有企业可以使用.我在这里就简单的实现一下map组件的定位用户的位置的功能. 下面的 ...

小程序image组件自适应宽高比

小程序image组件自适应宽高比相关推荐

最新文章

热门文章