1

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:

introducir la descripción de la imagen aquí

Y por otro las que fueron sacadas horizontalmente;

introducir la descripción de la imagen aquí

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?

2
  • Probaste a darle a la imágen 100% en maxHeight ? el 19 oct. 2022 a las 18:30
  • Si pero la imagen sale de la pantalla directamente jajaja el 19 oct. 2022 a las 18:33

1 respuesta 1

1

Quita todo eso y prueba con esto solo con CSS:

.modal-dialog {
  display: table;
  overflow-y: auto;
  overflow-x: auto;
  width: auto;
}

Lo he usado en algunos lugares y más o menos me funciona bien así. Si acaso, en lugar de modificar el modal-dialog (que puede afectar a todos los modales de tu web) agrega una nueva clase al elemento que tiene la clase modal-dialog que quieras que funcione de ese modo y que tenga esas propiedades CSS que he puesto más arriba.

Ya nos cuentas si te sirve.

4
  • Me funcionó con que las imagenes estén dentro del modal, pero aún asi algunas de las imágenes verticales se salen de la pantalla, y las horizontales estoy intentnado agrandarlas pero tampoco puedo, se siguen viendo chicas. Pero muchas gracias! el 19 oct. 2022 a las 18:45
  • En bootstrap hay la clase img-fluid que quizás te convenga utilizar para eso... Mira a ver si te sirve de algo también.
    – masterguru
    el 19 oct. 2022 a las 18:52
  • Es raro, estoy probando de usar modal-xl pero no me lo toma tampoco... el 19 oct. 2022 a las 19:05
  • bueno, si estas usando el código de mi respuesta debe estar interfiriendo en ello
    – masterguru
    el 19 oct. 2022 a las 19:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.