twitter-bootstrap 如何在引导模式中使图像响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20105179/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make an image responsive in a bootstrap modal?
提问by Jimmy.Bystrom
I have a image gallery that shows a larger version of the image when an image is clicked.
我有一个图片库，可以在单击图像时显示更大版本的图像。
The problem is that the larger version of the image is to large for the modal, i.e. I have scrollbars even if I view the page on a computer with a large screen.
问题是图像的较大版本对于模式来说太大了，即即使我在具有大屏幕的计算机上查看页面我也有滚动条。
I want the image in the modal to be responsive so that it is resized when I have different resolutions.
我希望模态中的图像具有响应性，以便在我具有不同分辨率时调整其大小。
Also I would love to know if there is some problem using modal views when on a phone?
我也很想知道在手机上使用模态视图是否有问题？
The script I have that sets the different images dynamically is
我有动态设置不同图像的脚本是
$(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);
});
});
and a corresponding image link is
和相应的图像链接是
<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>
回答by Jimmy.Bystrom
Using .img-responsive works great when you want an image that adjust to the width of the containing object. If you want and image that adjusts to the height instead you just have to switch the definitions around, i.e.
当您想要调整到包含对象的宽度的图像时，使用 .img-responsive 效果很好。如果你想要调整到高度的图像，你只需要切换定义，即
.img-responsive-height
{
display: block;
width: auto;
max-height: 100%
}
