Вопросы Теги

Как конфигурировать модальное окно для того, чтобы он приспособился к реальному размеру сдержанного изображения?

Я использую Bootstrap 4.2, чтобы показывать возникающее (модальное) окно с изображением в реальном размере (100 %) как в ширине, так и в высоте, пока это позволил размер окна браузера, и в противоположном случае, а именно, если изображение больше, чем размер окна, тогда он сократится автоматически. Я попытался со следующим кодом, но расширяется изображение (+100 %) в ширине модального, хотя это будет конфигурировать с 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>

Изображения будут загружены dinámicamente, так что я не могу знать размер изображений по умолчанию.

4
задан 25.03.2019, 02:26
1 ответ

DespuГ©s тестирования с новостью versiГіn 4.3, и много, слишком много доказательств и потерянное время, я принял решение создать я собственный модальный, что в continuaciГіn я имею, из-за которого безопасный, у которого mГЎs одного будет эта проблема. Я считаю большой недостаток со стороны bootstrap, что не позволил конфигурировать правильно их tamaГ±os их imГЎgenes для больших экранов, настольных компьютеров todavГ - в existen, и tv с conexiГіn в Интернет tambiГ©n. Возможно неудача, что corregirГЎn в будущем. 

<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: Как только был открыт модальный, возможно закрывать кликая вне изображения, в botГіn Закрывать , или с клавишей Убегите . Изображение когда бы то ни было sobrepasarГЎ Ваш tamaГ±o реальный (100 %), но aprovecharГЎ вся ширина окна, чтобы являться (большими экранами). Responsive для mГіviles.

1
ответ дан 02.12.2019, 05:31

Теги

Похожие вопросы