Image grow to either max-width or max-height and keep aspect ratio

I'm creating an Instagram clone for demonstation purposes for CSRF for university. I have a modal window that should display the post either with a single image or a carousel view:

<div #detailDialog class="modal fade" id="postDetailDialog_{{post.id}}" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document" style="max-width: 800px !important;">
    <div class="modal-content">
      <div class="modal-body d-flex p-0" style="flex-direction: column;">
        ...carousel...
        <img *ngIf="post.images.length === 1" style="max-width: 800px !important; max-height: 800px !important; flex: 1 1 auto;" [src]="imageUrl + '?ImageId=' + post.images[0].id" alt="">
        <div class="p-3"><i class="fa-regular fa-heart fa-xl"></i></div>
        <p *ngIf="post.description.length > 0" class="m-3 mt-0">{{post.description}}</p>
      </div>
    </div>
  </div>
</div>

Because the images can have any resolution with any aspect ratio I want to scale the images to fulfill this condition: max(width, height) == 800px. I tried it using flexbox grow but it only works for width > height. An image with resolution 800x1600 does not become 400x800 but 800x800.

I don't want to use object-fit: contain because this would not change the bounds of the image and would result in a white border

Any ideas?