如何在引导模式中使图像响应？

Question

我有一个图像库,可以在单击图像时显示更大的图像版本.

问题是图像的较大版本对于模态来说很大,即使我在具有大屏幕的计算机上查看页面,我也有滚动条.

我希望模态中的图像具有响应性,以便在我有不同的分辨率时调整大小.

另外我想知道在手机上使用模态视图是否有问题？

我有动态设置不同图像的脚本是

$(document).ready(function () {$(document).on("click", ".open-ImageModal", function () {
            $(".modal-body #image").attr("src", $(this).data('id'));
            var desc = $(this).data('desc');
            $(".modal-body #description").text(desc);
        });
    });

和相应的图像链接

<a data-toggle="modal" data-id="Images/FullImages/LargeVersion.jpg" data-desc="Descriptive text" class="open-ImageModal" href="#imageModal">
                            <img src="Images/Thumbs/SmallVersion.jpg" />
                        </a>

Answer 1

当您希望图像调整到包含对象的宽度时,使用.img-responsive可以很好地工作.如果你想要和图像调整到高度,你只需要切换定义,即

.img-responsive-height
{
  display: block;
  width: auto;
  max-height: 100%
}