美文网首页
react native Image resizeMode

react native Image resizeMode

作者: 楚怀哲 | 来源:发表于2016-12-21 17:56 被阅读0次

    原图 :150*80

    现在 大小: 100* 100

    resizeMode enum('cover', 'contain', 'stretch', 'repeat', 'center')

    决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。
    cover
    : 在保持图片宽高比的前提下缩放图片,直到宽度和高度都大于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全覆盖甚至超出容器,容器中不留任何空白。

    {50FF9F5C-6EBA-5A1D-0341-8D6F64C94905}.png

    contain
    : 在保持图片宽高比的前提下缩放图片,直到宽度和高度都小于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全被包裹在容器中,容器中可能留有空白

    {79E70D76-DAF7-B198-817D-9DBB3A506494}.png

    stretch
    : 拉伸图片且不维持宽高比,直到宽高都刚好填满容器。

    {148F8046-349D-C335-0975-543D6B554176}.png

    repeat
    : 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。

    {2DF7D91A-00A5-AE5F-2562-26B0B2D593A3}.png

    center
    : 居中不拉伸。

    {F1A6811F-11AD-9CED-8DBA-4ED0EF1CA2EB}.png

    相关文章

      网友评论

          本文标题:react native Image resizeMode

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