美文网首页微信小程序
9-7 图片的缩放与裁剪

9-7 图片的缩放与裁剪

作者: 留白_汉服vs插画 | 来源:发表于2017-11-30 15:29 被阅读6次

编写movie-detail页面

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

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

上面那个图,就是scaleToFill。

aspectFit下面效果:

长边显示。

aspectFill,短边完全显示。也就是说,长边会被裁剪。居中裁剪。

图片缩放裁剪,一定有高宽,没有定高定宽的话,裁剪没有意义啊。指定的宽高,再进行裁剪。如果不指定高宽,小程序会自己指定高宽,拉大或者缩小剪切。

裁剪:


原图:

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

center:

bottom right时候:

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

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

相关文章

网友评论

    本文标题:9-7 图片的缩放与裁剪

    本文链接:https://www.haomeiwen.com/subject/bcmvbxtx.html