css - 在 4 :5 ratio and fit inside container view in react native 中显示图像

Question

我不知道用户预先上传的图片比例，但我需要以 4:5 的比例显示所有图片，即

image width=device window width size 
image height=(device window width size)*5/4

我使用上述计算在容器 View 中显示我的图像，但图像被裁剪了。如果我使用调整大小模式，图像会失真。

代码:

<View style={styles.container}>
      <Image style={styles.fixedRatio} source={{ uri: this.props.navigation.state.params.uri }}/>
    </View>

    container: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center'
    },
    fixedRatio: {
      marginLeft:-10,
      marginRight:-10,
      backgroundColor: 'red',
      flex: 1,
      aspectRatio: 1,
      width: deviceWidth,
      height: deviceWidth*5/4
    },

编辑 1:

根据@marson 的回答，我更改了如下代码

我设置背景颜色来区分图像。现在图像没有被裁剪。但不适合在 View 中

<View style={{ backgroundColor: 'blue', aspectRatio:4/5, alignSelf:'center', width: '100%'}}>
   <Image resizeMode={'contain'} style={{width:'100%', height:'100%'}} source={{ uri: this.props.navigation.state.params.uri }}/>
</View>

Answer 1

这行得通吗？

<View style={{
  width: '100%',
  aspectRatio={4.0/5.0}
}}>
  <Image
    style={{
      width: '100%',
      height: '100%',
    }}
    resizeMode={'contain'}
    source={...}/>
</View>