Css 自动调整N个图像的大小以适应容器

我的设计如下：

<View style={{flexDirection: "column", justifyContent: "space-around", alignItems: "center", flex: 1}}>
  <TopElement style={{position: "absolute", top:5}}/>
  <Image key={1}/>
  <Image key={2}/>
  ...
  <Image key={n}/>
  <BottomElement style={{position: "absolute", bottom:5}}/>
</View>

...

我的

n

图像太大，无法装入包装容器（例如我的屏幕）。是否可以在不接触当前尺寸的情况下调整它们的大小（保持纵横比）？我希望这些贴在集装箱的边缘

---

我不确定是否有内置功能，是否使用布局FlexBox道具是解决方案，或者可能根据屏幕高度手动计算每个图像的尺寸，或者可能添加另一个视图来包装它们

您可以按以下方式执行：

...

在父级

上使用

paddingTop

和

paddingBottom

，高度分别为

和

。使顶部/底部不会与图像重叠

将

prop

resizeMode

设置为

'contain'

。使图像在保持原始纵横比的情况下自动调整大小

---

感谢它在某种程度上起作用：图像被缩放以适应，但图像越多，它们的大小就越小：第一张图像几乎与原始图像一样，而最后一张图像的大小除以。。也许10个！有没有可能使它们按比例相互缩放？@Arkon你需要一个网格组件。react native photo grid：构建一个照片网格，每行具有灵活的照片数量。谢谢，我刚到！我使用了您的答案并在每张图片上添加了

{{flex:I}}

，其中

I

是我的图像数组在映射函数中的索引，该函数在这些图片上进行迭代。