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缩放图像

回答

相关问题