如何在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>

- Jimmy.Bystrom

---

你尝试过使用 .img-responsive 类吗？ - Blazemonger

在最新的Bootstrap中没有这样的类，但我尝试使用那个问题中定义的类，但是图片仍然对于模态窗口来说太大了，这意味着即使在大屏幕上也会自动出现滚动条。 - Jimmy.Bystrom

实际的模态代码如下：

关闭

- Jimmy.Bystrom

.img-responsive实际上是Bootstrap 3的一部分。它使用max-width: 100%，所以我不明白它怎么会使图像太大而无法适应您的容器。 - Blazemonger

抱歉，我以为我有最新的Bootstrap CSS，但显然不是。img-responsive效果非常好。谢谢！ - Jimmy.Bystrom

BS文档：http://getbootstrap.com/css/#images-responsive - mfink

Answer 1

使用 .img-responsive 可以很好地调整图像大小，使其适应包含它的对象的宽度。如果你想要调整高度而不是宽度的图像，只需要切换定义，即

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

- Jimmy.Bystrom