React Native图片适配宽度且底部溢出隐藏，图片顶部对齐问题求解

直接给图片添加objectPosition: 'top'样式即可，同时确保父View已经设置了overflow: hidden。

修改后的图片样式：

width: '100%',
height: undefined,
aspectRatio: 1,
objectPosition: 'top'

原理说明 #

默认情况下，图片在容器内的对齐方式是居中（50% 50%），所以当父View尺寸小于图片高度时，图片会上下部分都溢出。通过objectPosition: 'top'可以强制图片顶部对齐，这样只有底部超出父View的部分会被overflow: hidden隐藏，符合你的需求。

备选方案（定位实现） #

如果上述方法不生效，也可以用绝对定位的方式实现：

1. 给父View添加样式：

position: 'relative',
overflow: 'hidden'

2. 图片样式修改为：

position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: undefined,
aspectRatio: 1

这样图片会从父View的顶部开始布局，底部超出部分自动被隐藏。

内容的提问来源于stack exchange，提问作者samuel