twitter-bootstrap - 如何在 Bootstrap 模式中使图像响应？

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%
}