Помогите настроить карусель с вертикальными и горизонтальными фото

Делаю карусель с фиксированной горизонтальной областью для фото. Шаблон взят с Bootstrap5. Вертикальные изображения должны соответсвенно уменьшаться, чтобы встать в эту область, но они обрезаются и увеличиваются, превращаясь в горизонтальные. Почему так происходит?

HTML

<div class="container-fluid my-carousel">
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      {% for photo in photos %}
      <div class="carousel-item {% if forloop.first %}active{% endif %}">
        <div class="image-container-first">
          <div class="image-container img-first">
            <img src="{{ photo.image.url }}" class="d-block w-100" alt=" " />
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

CSS

.image-container-first {
  width: 0 auto;
  height: 700px;
  display: flex;
  justify-content: center;
  place-items: center;
}

.image-container img-first {
  width: 0 auto;
  height: 100%;
  object-fit: contain;
}