开发者工具的界面如图，我想让外层的view组件高度和image的高度一致，请问为什么外层的view组件高度比内部image高这么多？不应该自动适应图片的高度吗？有大佬解答吗

这是wxml代码：
<view class="container">
  <view class="image-wrapper">
    <image src="../../images/star1.jpg" mode="widthFix"></image>
  </view>
</view>

这是css代码：
.container {
    width: 90%;
    margin: 10% 5% 0 5%;
    box-shadow: 4rpx 4rpx 8rpx 0 rgba(0, 0, 0, 0.2), 0 6rpx 20rpx 0 rgba(0, 0, 0, 0.19);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .image-wrapper {
    width: 70%;
    margin: 0% 0% 0% 0%;
    padding: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
  }