Javascript 调整大小的图像占用了太多的UI空间

我有一个绝对定位的圆形图像。该图像只需占屏幕宽度的17%，并且距离顶部5像素

问题是，当我调整图像大小以占据屏幕宽度的17%时，它会这样做，但同时容器会拉长。图像本身不拉伸，但位于拉长图像容器的中间

风格：

const styles = StyleSheet.create({
    imageBase: {
        position: 'absolute',
        left: 15,
        top: 5,
        width: '17%',
        resizeMode: 'contain',
        backgroundColor: 'red',
    }
});

我正在渲染的内容：

<Image 
       style = { styles.imageBase }
       source = { require('roundImage.png') }>
</Image>

当前结果：

我需要它来切断图像容器的额外空间，或者将图像放置在容器的顶部，而不是中间

我想做的是：

---

解决此问题的一种方法是在视图中使用1:

您是否也尝试将身高增加到17%？是的。这使得图像只有几个像素高：/

<View style={{ flex: 1 }}>
  <View
    style={{
      position: 'absolute',
      left: 15,
      top: 5,
      width: '17%',
      aspectRatio: 1,
    }}
  >
    <Image
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: 'red',
        resizeMode: 'contain',
      }}
      source={require('roundImage.png')}
    />
  </View>
</View>