react native Image resizeMode

原图 :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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容