关键词: 微信小程序 图片真实大小 图片模式详解
这两天自己设计了两张微信广告横幅,电脑设计尺寸为750*300像素,传到微信小程序图标组件中,设置设备为iPhone6 375* 667 DPR为2,理论像素为750像素,应该为完全填充,但是尺寸并未填充完整屏幕.下面是拿一张尺寸图进行填充,示例如下:
调试中尺寸对比
在左边的微信调试(IPhone6)中750像素宽度完成展示出来, 如果想让设计稿真个图片不拉伸完全填充,那设计稿应该设计多少像素呢? 答案是电脑中设计820像素, 如何算出来,也是无意中,调到设备宽320时,自动铺满, 有时就是这么巧, 320/350 ,这个比例记好, 在设计时能设计最合适的稿件.
了解了图片真实显示后,如何写样式,让图片达到原先的比例呢?给 image 设置了宽度100%后，设置 height:auto; 图片没有像预先效果长高,反而不见了,这让我百思不得其解,之后,看了同事代码,他使用的方法是利用全局对象,得到屏幕宽度,在设置高度为宽度的几分之几.最后想出较优方法是设置组件的宽高,宽高设置就用到了前一篇文章的em(rem);两者在我看来没什么差别.还是以上面750像素为例,750像素要填充整个页面宽度, 整个页面宽度,微信将它等分20个em,我们这样写
<image src='/images/3.png" style='width:20em' />
高度是宽度的2倍, 不就是 height=40em; 这个图片会设置了,其他的图片等比就是这样来设置,em.题外话高度用EM设置很方便,尤其是用在盒模型装载图片,文字的排版上)
上面的技巧都是自己总结出啦的野路子.接下来咱们来讲讲正规化的image组件中的模式.以下是官方文档
mode 有效值：
mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
模式值说明
缩放scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放aspectFill----保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放widthFix----宽度不变，高度自动变化，保持原图宽高比不变
裁剪top----不缩放图片，只显示图片的顶部区域
裁剪bottom----不缩放图片，只显示图片的底部区域
裁剪center----不缩放图片，只显示图片的中间区域
裁剪left----不缩放图片，只显示图片的左边区域
裁剪right----不缩放图片，只显示图片的右边区域
裁剪top left----不缩放图片，只显示图片的左上边区域
裁剪top right----不缩放图片，只显示图片的右上边区域
裁剪bottom left----不缩放图片，只显示图片的左下边区域
裁剪bottom right----不缩放图片，只显示图片的右下边区域
这里面常用的的是 aspectFit aspectFill widthFix scaleToFill 其他的可以不用去考虑
scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素,很好理解,如果这样好理解,那就错了,我们还是以上图750像素为例,第一张是设置scaleToFill ,父元素宽高未设定.第二张父元素宽高有设定.
刚开始我认为它的模式是对父元素起作用,这个是错误的逻辑,纠正一下,Image 模式都是针对自身样式进行设定,那要怎么用呢;?来写一个。
<image src='/images/x1.png' mode='scaleToFill' style='height:20em; width:30em' />
整个拉伸了,这里为了方便,都是写内联样式.scalToFill在实际开发中很少用.只要理解了image 的模式是相对于自身样式,就很好理解下面模式.
aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来.应用方法,设置image 样式的高度,不用设置宽度, 图片就自动等比缩放.
aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来.
widthFix; 相当于HTML中的cover; 图片宽度完成显示出来,这个最常用.
后续还有更多的干货,添加微信公众号,将他分享给你身边的码农,设计师
网友评论