图像未正确显示答案

【问题标题】：Image not displayed properly图像未正确显示
【发布时间】：2017-08-03 09:03:15
【问题描述】：

这就是我在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 会解决这个问题，但在这里没有帮助。我想要的只是显示整个图像而没有任何额外的边距。

请帮忙。谢谢。

【问题讨论】：

这里似乎是一个纵横比问题，如果图像是它需要覆盖的包含元素的确切比例，contain 将完美地工作。
我认为您必须在裁剪或拉伸之间做出选择。
@Ihazkode 是否有任何方法可以显示整个图像而无需裁剪/拉伸？我对拉伸没问题，但为什么只显示其中的一部分？
这里，看看jsfiddle.net/ewtrt0xr #1 是拉伸 #2 是裁剪，#3 是包含
或创建与您预期用途的纵横比相匹配的图像

标签： css reactjs react-native react-image

【解决方案1】：

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

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

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

【讨论】：

大量裁剪图像。我想显示整个图像而没有额外的边距。
如果您的图像的屏幕尺寸不同，这是不可能的。你可以去掉上边距，但下面的空白会继续。