resizeMode包含在native native中显示图像之前和之后的空间

Question

我尝试使用resizeMode =＆＃34;来显示宽度根据身高调整的图像;包含＆＃34;为此目的，它显示图像前后的空间。我尝试设置边距，填充，左，右，但没有一个工作。

 <View style={{ flex: 1 }}>
        <ScrollView horizontal>
        <View style={{ borderColor: "#f00", borderWidth: 2, height: 300 }}>
            <Image source={images[0].uri} resizeMode="contain" style={{ height: 300, width: 300 }} />
        </View>
        <View style={{ borderColor: "#f00", borderWidth: 2, height: 300 }}>
            <Image source={images[1].uri} resizeMode="contain" style={{ height: 300 }} />
        </View>
   </ScrollView>
</View>

Answer 1

resizeMode="contain"是Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view，它意味着（在您的图片上），拉伸高度和宽度，直到height=300，但保持纵横比。所以宽度永远不会覆盖屏幕，因为它小于高度。

如果您希望宽度覆盖所有屏幕，请使用stretch或cover。

也许我不明白你的问题是正确的。如果是，请告诉我，我删除了我的答案。

Answer 2

resizeMode="contain"均匀缩放图像（保持图像的纵横比）时，还将宽度纵横比设置为等于要赋予图像的高度。

例如，如果您的图像尺寸为 210x300 ，并且您希望图像的高度为 100 。您需要将宽度设置为 与 70 相同的长宽比 。
<Image style={{height:100, width:70, resizeMode:"contain"}}/>

否则，您将获得图像原始宽高比的宽度间距。