将图像设置为宽高比

Question

我拥有的是

我想要的是覆盖图像背后的整个蓝色空间，同时保持其宽高比。我的代码如下。帮助会非常感激。

            <View style={styles.headerStyle}>
                <Image style={styles.headerImageStyle}
                    source={require('./images/headerimages/headerImage.jpg')} />
            </View>

const styles = StyleSheet.create({
    headerStyle: {
        backgroundColor: '#42a1f4',
        height: 125,
    },
    headerImageStyle: {
        width: Dimensions.get('window').width,
        flex:1,
        height: 125,
        alignSelf: 'center',
        resizeMode: 'contain'
    },
});