300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 小程序image组件自适应宽高比

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

时间:2019-12-05 14:14:21

相关推荐

小程序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 不缩放图片,只显示图片的右下边区域

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。