Увеличить картинку с помощью Bootstrap modal - PullRequest
Новая
       33

Увеличить картинку с помощью Bootstrap modal

0 голосов
/ 18 апреля 2019

Цель состоит в том, чтобы создать адаптивный модальный режим, при котором при нажатии на изображение в модале отображается полный размер, равный размеру полноразмерного изображения.Например, если изображение 300x300, я хочу модальное значение 300x300.Если модальное значение равно 2300x140, я хочу, чтобы модальное значение было таким: 2300x140.

Я добавил различные варианты modal-lg, mw-100, w-100 и другие спецификации ширины кmodal-dialog и full-size-img.Эти комбинации очень близко подошли ко мне, но они соответствуют только одному из изображений.Если большое изображение подходит, меньшее окружается пробелами.Если меньший размер подходит, то большее изображение либо не является полноразмерным, либо простирается за край модального размера.Т.е. я не знаю, чтобы модальный размер реагировал на изображение. 

<div class="modal fade" id="image-modal" tabindex="-1" role="dialog" aria-labelledby="image" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title"></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <img id="full-size-img" src="" alt="" class="img img-responsive">
        </div>
        <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-default btn-cancel ml-auto">Close</button>
        </div>
    </div>
</div>

...