Basicamente lo que estoy intentnado hacer es que si las fotos fueron sacadas horizontalmente, el modal tengo un tamaño, y si fueron sacados verticalmente que tengan otro tamaño.
Por un lado tengo las imagenes verticales que se salen del Modal:
Y por otro las que fueron sacadas horizontalmente;
Las imagenes son traidas de la base de datos y cargadas con un ajax, por lo que estuve tratando de adaptarles el tamaño desde ahi, con javascript:
while (i < result.length) {
var carusel = document.getElementById("Entrega_" + entrega);
if (i == 0) {
var div = document.createElement('div');
div.setAttribute('class', 'carousel-item active');
var img = document.createElement("img");
img.setAttribute('class', 'd-block w-100 modal-content');
img.setAttribute('id', "img01")
div.appendChild(img);
img.setAttribute('src', result[i].path);
carusel.appendChild(div);
i++;
}
else {
var div = document.createElement('div');
div.setAttribute('class', 'carousel-item');
var img = document.createElement('img');
img.setAttribute('class', 'd-block w-100 modal-content');
img.setAttribute('id', "img01")
div.appendChild(img);
img.setAttribute('src', result[i].path);
carusel.appendChild(div);
i++;
}
}
modal.style.display = "block";
var modalImg = document.getElementById("img01");
// the added if-statement to change the max-width
if (modalImg.naturalWidth > modalImg.naturalHeight) {
modalImg.style.maxWidth = '50vw';
} else {
modalImg.style.maxWidth = '30vw';
modalImg.style.maxHeight = '';
}
}
Pero no parece estar cambiandolo.
Y con Css:
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 2%;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0,0,0,0.9);
text-align: center;
}
.modal-content{
margin: auto;
display: block;
width: 100%;
max-width: 30vw;
max-height:85vh;
object-fit: cover;
}
Pero tampoco veo resultados. Me podrian dar una mano con ésto?