Resize modal with image size - html

Question

What I'm trying is to resize the modal with the right size of each image.
If the image was taken horizontally, the modal must be horizontal, if it was taken vertically, the modal must be vertical.
Also, I must have a max-height because if not, vertical images exceed the view.
What I'm trying is:
When de DOM is loaded, I try to resize the img with style.maxWidth/maxHeight:
window.addEventListener('DOMContentLoaded', (event) => {
let modalImg = document.getElementById('modal-dialog');
for (var i = 0; i < modalImg.lenght; i++) {
if (modalImg[i].naturalWidth > modalImg[i].naturalHeight) {
modalImg[i].style.maxWidth = '50vw';
} else {
modalImg[i].style.maxWidth = '30vw';
modalImg[i].style.maxHeight = '80vh';
}
}
});
I'm using Bootstrap 5, so most of the styles are from there, I use this css to try to fix this but I can't
.modal-dialog {
display: table;
overflow-y: auto;
overflow-x: auto;
width: auto;
}
#img01{
max-width: 100vw;
}
.modal-content{
margin: auto;
display: block;
width: 100%;
object-fit: cover;
}
This is my modal:
<div id="myModal" class="modal" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" id="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" onclick="CloseModal()" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="C_#item.getNumeroEntrega()" class="carousel carousel-dark slide" data-bs-ride="carousel" data-bs-touch="false" data-bs-interval="false">
<div id="Entrega_numeroEntrega" class="carousel-inner" name="carousel-inner">
<!-- IMAGENES -->
#foreach (var pd in Model)
{
if (img2 != pd.getImagenes().ToString())
{
<div class="carousel-item" id="carousel-item_#cont2" name="carousel-item">
<form action="~/Home/DescargarImagenIndividual" class="mb-3 position-relative">
<button type="submit" id="btnDescargarImagen" class="btn btn-primary" value="#pd.getImagenes()" name="imagenSelec">
<i class="fa fa-download mx-2"></i>Descargar Imágen
</button>
</form>
<img class="img-responsive imagenModal" id="img01_#cont2" src="#pd.getImagenes()" data-img-mostrar="#cont2" />
</div>
}
cont2++;
img2 = pd.getImagenes();
}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#C_#item.getNumeroEntrega()" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#C_#item.getNumeroEntrega()" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>