如何使图像在自举模式下响应？

我有一个图像库，显示单击图像时图像的较大版本。如何使图像在自举模式下响应？

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

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

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

脚本我有一个设置不同的图像动态是

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

来源

2013-11-20 Jimmy.Bystrom

你试过['。.img-responsive']（http://stackoverflow.com/q/ 17932509/901048）课？ – Blazemonger

在最新的引导程序中没有这样的类，但我尝试使用在该问题中定义的类，但图像对于模式窗口仍然很大，这意味着即使在大型显示器上也会自动显示滚动条。 –

实际模态码是像如下

–

使用.IMG响应作品伟大的，当你想的是调整图像包含对象的宽度。如果你想和图像调整到高度，而不是你只需要切换定义，即

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

来源

2013-11-25 09:51:58

如何使图像在自举模式下响应？

回答

相关问题