编写movie-detail页面
网络加载的图片,实际上常常是不知道高宽的。那么怎样才能让它呈现出我们想要的效果呢?

那么图片就要进行裁剪或者缩放。看一下官方的api,mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。


上面那个图,就是scaleToFill。
aspectFit下面效果:

长边显示。
aspectFill,短边完全显示。也就是说,长边会被裁剪。居中裁剪。
图片缩放裁剪,一定有高宽,没有定高定宽的话,裁剪没有意义啊。指定的宽高,再进行裁剪。如果不指定高宽,小程序会自己指定高宽,拉大或者缩小剪切。
裁剪:
原图:

top的时候,保留了上面一部分:

center:

bottom right时候:

(这里的图宽度比较小,高度裁剪了,宽度不足以填充满,所以没有裁剪。看下面大图,高宽都裁剪之后的)

不给高宽,默认给你320,不管你大图,还是小于320的小图。
网友评论