美文网首页微信小程序
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