我想通过使用Flexbox和响应单位将三个图像放在一起，在这种情况下百分比（%）。我有2个问题：（1）调整内容不工作，因为我使用%的弹性项目。（2）我的图像的高度越来越大，比宽，换句话说，宽度和高度我的图像是不是相对在一起，因为我使用了自动关键字的图像高度，所以我可以有宽度和高度相对。我会非常感激，如果你能帮助我。我会包括我的代码如下。

.services h2 {
  margin: 3.125rem 0 2rem;
}

#services-container {
  display: flex;
  width: 100%;
}

.service-item {
  width: 90%;
  height: 65%;
  overflow: hidden;
}

.service-item img {
  width: 100%;
  height: auto;
  display: block;
}

<section class="services">
  <h2>our services</h2>
  <div id="services-container">
    <div class="service-item hotel">
      <img src="./resources/pictures/hotel.jpg" alt="hotel">
      <h4>The best hotels</h4>
    </div>
    <div class="service-item air-plane">
      <img src="./resources/pictures/airplane.jpg" alt="airplane">
      <h4>The best airline services</h4>
    </div>
    <div class="service-item food">
      <img src="./resources/pictures/food.jpg" alt="food">
      <h4>The highest quality foods</h4>
    </div>
  </div>
</section>