Bootstrap：响应式缩放图像答案

【问题标题】：Bootstrap: Responsively Scale ImageBootstrap：响应式缩放图像
【发布时间】：2014-02-21 09:45:46
【问题描述】：

我想做的是为某些屏幕尺寸指定某些图像尺寸。是否存在仅在某些屏幕尺寸下才激活的引导类？这将是最佳的。这样我可以做类似<img class = "only-active-on-mobile" src="myimage.jpg"> 的事情，对吗？

到目前为止我的代码是：

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

【问题讨论】：

根据您使用的引导程序版本，您正在寻找的称为实用程序类，引导程序 2 的 .hidden-mobile/.show-mobile 等，.visible-lg/.hidden- lg for bootstrap 3 了解更多信息refer to the docs
附带说明，如果您想响应式缩放图像，请指定宽度但保留高度：自动；因为这将保持纵横比
我正在使用 3，您能否提供一个示例，说明如何为移动设备设置图像，以及如何设置更大的图像？当手机显示时，较大的图像应该是不可见的，反之亦然。 @PatsyIssa
将 .visible-xs 类添加到图像中，这将使其仅在移动设备上显示在它的位置有另一个图像 .hidden-xs 类将使其在移动设备上显示并被隐藏其余的。查看我第一条评论中的链接，您可以在那里找到所有课程。
@PatsyIssa 非常感谢您的帮助。如果您将其添加到答案中，我会将其标记为正确。非常感谢。

标签： css twitter-bootstrap scaling

【解决方案1】：

Bootstrap 为此目的提供了一组“实用程序”类，.visible- 和 .hidden-。

要根据设备宽度隐藏/显示内容，请添加以下内容：

xs 用于超小型设备（手机

sm 适用于小型设备（平板电脑 ≥ 768px）

md 适用于中型设备（桌面≥992px）

lg 用于大型设备（桌面≥1200px）

所有这些都可以在 the docs

中找到

在您的情况下，为移动图像添加类.visible-xs，为替换图像添加.hidden-xs。

【讨论】：

为其他屏幕尺寸定义的图像最初仍会被加载。所以如果你想这样做，那么节省带宽，你会得到恰恰相反的效果。也许结合延迟加载它会起作用。