css - 从桌面更改为移动时如何调整(裁剪)图像

Question

我在我的 Rails 应用程序中使用 twitter-bootstrap，因此我同时为桌面和移动设备设计。

在桌面上，我的网站使用了一系列非常适合的“横幅”样式图像。当在移动设备上查看时，这些图像会保持缩放比例，因此太小了。

我希望发生的事情与 facebook 应用程序中的用户个人资料发生的事情非常相似。当您在桌面上查看您的 Facebook 个人资料时，您的横幅图像是其原始大小，而当您在移动设备上查看您的个人资料时，左侧和右侧被裁剪掉了。

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

是否有我在 bootstrap 中忽略的东西或我可以用来解决这个问题的 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，为图像指定不同的宽度。