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

【问题标题】：How can I make an image responsive in a bootstrap modal?如何在引导模式中使图像响应？
【发布时间】：2013-12-04 23:47:01
【问题描述】：

我有一个图片库，当点击图片时会显示放大版的图片。

问题是图像的较大版本对于模式来说太大了，即即使我在大屏幕的计算机上查看页面，我也有滚动条。

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

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

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

$(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>

【问题讨论】：

你试过.img-responsive类吗？
在最新的引导程序中没有这样的类，但是我尝试使用该问题中定义的类，但图像对于模态窗口来说仍然太大，这意味着自动有一个滚动条即使在大型显示器上。
实际模态代码如下

关闭
.img-responsive 实际上是Bootstrap 3 的一部分。它使用max-width: 100%，所以我看不出它如何使图像对于您的容器来说太大。
我的错，我以为我有最新的引导 css，但显然没有。 img-responsive 效果很好。谢谢！

标签： twitter-bootstrap jquery-mobile responsive-design

【解决方案1】：

当您想要调整到包含对象宽度的图像时，使用 .img-responsive 非常有用。如果你想要调整到高度的图像，你只需要切换定义，即

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

【讨论】：