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

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

1 个答案: