css - 图像未正确显示

Question

这就是我展示我的形象的方式React-Native:

<View>
    <Text style={styles.myTitle}> This is the title 2 </Text> 
    <Image
      style={{ width: null}} 
      source={require('./images/05.jpg')}
      resizeMode="stretch"
    />
</View>

resizeMode="stretch"图像显示如下：

显示时相同的图像resizeMode="contain"：

<View>
    <Text style={styles.myTitle}> This is the title 3</Text> 
    <Image
      style={{ width: null}} 
      source={require('./images/05.jpg')}
      resizeMode="contain"
    />
</View>

resizeMode="contain"：

我希望图像像第二种类型一样显示，但有不必要的边距：

第一张图片的边距很完美，但没有显示完整的图片。我一直认为contain会解决这个问题，但在这里没有帮助。我想要的是显示整个图像而没有任何额外的边距。

请帮忙。谢谢。

Answer 1

您可以使用cover，但它会裁剪图像的一部分。

要使其正常工作，您需要为图像添加一个高度属性：

  <View>
    <Text>This is the title 3</Text>
    <Image
      style={{ width: null, height: '100%' }}
      source={require('./image.png')}
      resizeMode="cover"
    />
  </View>