4

Estoy usando Bootstrap 4.2, para mostrar una ventana emergente (modal) con una imagen en tamaño real (100%) tanto en anchura como en altura, mientras lo permita el tamaño de la ventana del explorador, y en caso contrario, es decir, si la imagen es mayor que el tamaño de la ventana, entonces se reducirá automáticamente. He probado con el siguiente código, pero se amplía la imagen (+100%) en el ancho del modal, aunque lo configure con max-width: 100%.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Imagen 100%</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
    <style>
        .img-100{
            max-width: 100%;
            max-height: 100%;
       }
    </style>
    <a href="#modalArticulo" role="button" class="btn btn-primary" data-toggle="modal">Launch modal</a>
    <div id="modalArticulo" class="modal fade " tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <img src="../images/Imagen360x360.jpg" class="img-100">
           <!-- <img src="../images/Imagen1200x1200.jpg" class="img-100"> -->
            </div>
        </div>
    </div>
</body>
</html>

Las imágenes se cargarán dinámicamente, así que no puedo saber el tamaño de las imágenes de manera predeterminada.

1
  • Bootstrap tiene la opcion modal extra large. En todo caso en el codigo, trata de usar !important para que tomen precedencia sobre otras reglas de estilo.
    – user101604
    Commented el 18 mar. 2019 a las 6:10

2 respuestas 2

1

Después de probar con la nueva versión 4.3, y muchas, demasiadas pruebas y tiempo perdido, he decidido crear mi propio modal que a continuación comparto por que seguro que más de uno va a tener este problema. Considero una gran carencia por parte de bootstrap que no deje configurar correctamente los tamaños de las imágenes para grandes pantallas, los ordenadores de sobremesa todavía existen, y las tv con conexión a internet también. Posiblemente un fallo que corregirán en un futuro.

<body>
    <style>
       .modal-image{
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.9);
        }

        .modal-content-img{
            margin: auto;
            display: block;
            max-width: 100%;
            max-height: 95%;
            animation-name: zoom;
            animation-duration: 0.6s;
        }

        @keyframes zoom{
            from{transform:scale(0)}
            to{transform:scale(1)}
        }

        .modal-nav{
            display: flex;
            justify-content: center;
        }
    </style>
    <h1>Custom Modal Image</h1>
    <button id="showModal" class="btn btn-info">Modal</button>
    <div id="modalImage" class="modal-image">
        <div class="modal-content-img">
            <img src="../images/Imagen1920x1200.jpg" class="modal-content-img">
            <div class="modal-nav">
                <button id="close" class="btn btn-info btn-sm">Cerrar</button>
            </div>
        </div>
    </div>

    <script>
        window.onload = function(){
            var show = document.getElementById('showModal');
            show.addEventListener('click', showModal);

            function showModal(){
                var modal = document.getElementById('modalImage');
                var close = document.getElementById('close');
                var img = document.getElementById('img');

                modal.style.display = "flex";
                modal.style.flexDirection = "column";
                modal.style.justifyContent = "center";
                modal.style.alignItems = "center";
                modal.style.alignContent = "center";

                close.addEventListener('click', hideModal);
                modal.addEventListener('click', hideModal);
                document.addEventListener('keydown', hideModal);

                function hideModal(e){
                    e.stopPropagation();
                    <!-- Si el evento fue lanzado por el modal (this) -->
                    if(e.target == this || e.key == 'Escape'){
                        modal.style.display = "none";
                        close.removeEventListener('click', hideModal);
                        modal.removeEventListener('click', hideModal);
                        document.removeEventListener('keydown', hideModal);
                    }
                 }
            }
        }
    </script>
</body>

Características: Una vez abierto el modal, se puede cerrar haciendo clic fuera de la imagen, en el botón Cerrar, o con la tecla Escape. La imagen nunca sobrepasará su tamaño real (100%), pero aprovechará todo el ancho de la ventana para mostrarse (pantallas grandes). Responsive para móviles.

0

tienes que primero quitar el modal-content o hacer que este ocupe la totalidad del modal-dialog (lo mas practico seria sacar ese div), luego usar la clase img-fluid en la imagen, esta clase viene con un heigth: auto, luego en el img-100 lo dejas solo con un width: 100% y listo con eso deberia quedar ajustado al tamaño del modal y a su vez quedaria responsivo con la clase img-fluid.

el codigo quedaria asi.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Imagen 100%</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
    <style>
        .img-100{
            width: 100%;
        }
    </style>
    <div class="container">
    </div>
    <a href="#modalArticulo" role="button" class="btn btn-primary" data-toggle="modal">Launch modal</a>
    <div id="modalArticulo" class="modal fade " tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered">
            <img src="https://res.cloudinary.com/dm5wlpq7j/image/upload/v1549652775/s.png" class="img-100 img-fluid">
        </div>
    </div>
</body>
</html>

1
  • Carlos, tampoco funciona. El modal siempre es del mismo tamaño, aumentando las imágenes pequeñas y reduciendo la imagen de 1200x1200.
    – user11254
    Commented el 18 mar. 2019 a las 15:08

Tu Respuesta

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