如何使圖像在自舉模式下響應？

我有一個圖像庫，顯示單擊圖像時圖像的較大版本。如何使圖像在自舉模式下響應？

問題是，較大版本的圖像對於模式來說很大，即使我在具有大屏幕的計算機上查看頁面時也有滾動條。

我希望模式中的圖像具有響應性，以便在具有不同分辨率時調整圖像大小。

另外我很想知道在手機上使用模態視圖時是否有問題？

腳本我有一個設置不同的圖像動態是

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

如何使圖像在自舉模式下響應？

回答

相關問題