如何在从桌面更改为移动设备时调整（裁剪）图像

Question

我正在使用我的rails应用程序的twitter-bootstrap，因此我正在设计桌面和移动设备。

在桌面上，我的网站使用了一系列完美契合的“横幅”风格图像。在移动设备中查看时，这些图像会保持缩放，因此太小。

我想要发生的事情与facebook应用程序中的用户个人资料发生的情况非常相似。当您在桌面上查看自己的Facebook个人资料时，您的横幅图片就是其原始尺寸，当您在移动设备上查看个人资料时，左右两侧都会被裁剪掉。

是否可以在不上传2组图像的情况下执行此操作？

我是否在引导程序中忽略了某些内容或css中的基本内容，我可以使用它来修复此问题？

作为一个例子，我的横幅图片在桌面上看起来像这样

在移动设备中，它看起来像这样

我真的想将此功能应用到我自己的网站，因为它在移动和桌面之间切换，非常感谢任何帮助

编辑1

这是我用来显示图像的html示例

<div class="container">
  <div class="row">
    <div class="span12">
      <div class="home-about-us">
        <%= image_tag("about_us.jpg")%>
      </div>
    </div>
  </div>
</div> 

这是我已经应用于我的应用程序的sass

.home-about-us{
     img{
      display: block;
      margin-left: auto;
      margin-right: auto;
     }
 }

Answer 1

你可以做以下两件事之一：

1）在img上设置最大宽度限制，使其只能与设备本身一样宽，或者

2）使用媒体查询指定移动设备的最大宽度为720，然后指定图像的宽度，然后创建另一个媒体查询，但这次使用平板电脑和台式机的最小宽度为720，为图像指定不同的宽度。

Answer 2

只需使用BS响应图像类（“img-responsive”） - 直接从BS站点看here。