画廊内的响应图像不保持纵横比

Question

我是响应式图像设计的新手，我目前遇到的问题是某些图片在我的图库中没有响应。在窗口调整大小时，他们不保持纵横比，一旦我在移动视图中拥有我的画廊全宽，就会被压扁。任何人都可以帮助我，非常感谢！

.an-image {
  padding: 10px;
  text-align: center;
}

.an-image:nth-child(2n) {
  background: #ddd;
}

@media screen and (min-width: 700px) {
  
  .image-gallery {
    margin: 100px 0;
    background: #ddd;
  }
  .image-gallery .content {
    display: flex;
    text-align: left;
    justify-content: center;
    background: none;
  }
  .image-gallery .container-content {
    max-width: 1000px;
  }
  .an-image {
    flex: 33%; /* assumes three images */
    padding: 0;
    height: 250px;
    width: 250px;
    background: none;
    border: 1px solid red; /* just so you can see what's happening */
    margin-right: 10px;
  }

  .an-image:last-child {
    margin-right: 0;
  }

  .an-image img {
    height: 100%;
    width: 100%;
  }
  
}

@media screen and (max-width: 700px) {
  .an-image {
    flex: 33%; /* assumes three images */
    padding: 0;
    height: 250px;
    width: 100%;
    background: none;
    padding-bottom: 20px;

  }

  .an-image img {
    height: 100%;
    width: 100%;
}

<section id="images" class="image-gallery container">
  <div class="container-content">
    <div class="content">
      <div class="an-image">
        <img src="images/MillyCar.jpg" alt="Avatar" />
        <!-- add image one here with 150 word maximum caption -->
        <div class="image-caption"></div>
      </div>
      <div class="an-image">
        <img src="images/MillyCar.jpg" alt="Avatar" />
        <!-- add image two here with 150 word maximum caption -->
        <div class="image-caption"> </div>
      </div>
      <div class="an-image">
        <img src="images/MillyCar.jpg" alt="Avatar" />
        <!-- add image three here with 150 word maximum caption -->
        <div class="image-caption"> </div>
      </div>
    </div>
  </div>
</section>