ReactNative Image resizeMode

我们一般将Image定义的宽和高乘以当前运行环境的像素密度称为Image的实际宽高.当Image的实际宽、高与图片的实际宽、高不符时,视图片样式定义中resizeMode的取值不同而分为三种情况, 三个取值分别是: contain, cover和stretch.默认值是cover.

cover模式只求在显示比例不失真的情况下填充整个显示区域。可以对图片进行放大或者缩小,超出显示区域的部分不显示, 也就是说,图片可能部分会显示不了。
contain模式是要求显示整张图片, 可以对它进行等比缩小, 图片会显示完整,可能会露出Image控件的底色。 如果图片宽高都小于控件宽高,则不会对图片进行放大。
stretch模式不考虑保持图片原来的宽,高比.填充整个Image定义的显示区域,这种模式显示的图片可能会畸形和失真。
center模式, contain模式基础上支持等比放大。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Image组件 Image组件用于显示多种不同类型图片的React Native组件,包括网络图片、静态资源、临时...
    Longshihua阅读 10,208评论 0 1
  • 1,resizeMode介绍 (1)当Image组件的实际宽、高与图片的实际宽、高不符时,要如何显示图片由样式定义...
    春雨霏霏_____阅读 10,030评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,885评论 0 11
  • 1.ReactNative基础 1.RN的介绍 尽管在移动开发中,原生App的开发成本很高,但现阶段基于原生开发仍...
    佩佩216阅读 4,871评论 0 1
  • 有没有一次你执笔想学绘画时,发现已经晚了,但,其实往往你发现的时候还不晚! 有一位七旬的老奶奶,60岁才拿起画笔,...
    6429d4c611f4阅读 1,855评论 0 0

友情链接更多精彩内容