Question

目标是要具有一个响应模式，当单击图像时，该模式将在模式中显示为完整尺寸，该尺寸与完整尺寸的图像相同。例如。如果图片是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>

使用Bootstrap模式放大图片

0 个答案: