Bootstrap：Responsively縮放圖像

我想要做的是爲特定的屏幕尺寸指定某些圖像尺寸。是否有引導程序類只在某些屏幕大小時變爲活動狀態？這將是最佳的。這樣我可以做一些像<img class = "only-active-on-mobile" src="myimage.jpg">對嗎？Bootstrap：Responsively縮放圖像

我的代碼到目前爲止是：

<div class="media"> 
     <a class="pull-left" href="#"> 
     <img class="media-object img-rounded" style="" src="<%= image_path('MY_IMG_THAT_NEEDS_RESIZING.jpg') %>"> 
     </a> 
     <div class="media-body"> 
     <h4 class="media-heading">Media heading</h4> 
     <!-- Nested media object --> 
     <div class="media"> 
      ... 
     </div> 
     </div>

來源

2014-02-21 jamesdlivesinatree

根據你所使用的引導，你正在尋找被稱爲實用工具類的版本，.hidden移動/ .show移動等，爲引導2。可見，LG/.hidden-LG自舉3更多信息[請參閱文檔]（http://getbootstrap.com/css/） –

如果您想響應地縮放圖像，請指定寬度，但保留高度：auto;因爲這樣可以保持寬高比 –

我使用的是3，您能否提供一個關於如何爲移動設備設置圖像的示例以及用於更大程度的圖像的示例？當移動設備顯示時應該顯示更大的圖像，反之亦然。 @PatsyIssa – jamesdlivesinatree

引導提供了一組「實用工具」類此確切目的，.visible-和.hidden-。

要隱藏基於設備寬度/節目內容，您添加以下內容：

xs用於超小型設備（手機< 768px）

sm爲小型設備（平板電腦≥768px）

md適用於中型設備（臺式機≥992像素）

lg適用於大型設備（臺式機≥1200像素）

所有這一切都可以在the docs

找到你的情況添加類.visible-xs爲移動圖像和.hidden-xs用於更換一個。

來源

2014-02-21 10:32:18

謝謝！對於延遲給您答覆，感到抱歉。對於其他屏幕尺寸定義 – jamesdlivesinatree

圖片仍然可以得到初始加載。所以，如果你想這樣做，所以保存帶寬，你會得到恰恰相反的效果。也許結合懶加載它會工作。 – brejoc

Bootstrap：Responsively縮放圖像

回答

相關問題