从桌面更改为移动设备时如何调整（裁剪）图像的大小答案

【问题标题】：How to resize(crop) images when changing from desk top to mobile从桌面更改为移动设备时如何调整（裁剪）图像的大小
【发布时间】：2014-02-19 12:34:34
【问题描述】：

我将 twitter-bootstrap 与我的 rails 应用程序一起使用，因此我正在同时为桌面和移动设备进行设计。

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

我希望发生的事情与 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;
     }
 }

【问题讨论】：

给图片width:100%
不裁剪边缘
@arg0 ahhh 非常抱歉没有完全阅读您的问题。您需要从您的img 中删除max-width。并且我们只能在提供一些可以看到问题的代码或链接的情况下解决查询。再次抱歉
是的，我认为这个问题可能被误解了，这是一个奇怪的问题，因为通常人们希望在移动设备和桌面之间保持缩放和整个图像。

标签： css image twitter-bootstrap ruby-on-rails-4

【解决方案1】：

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

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

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

【讨论】：

这两种解决方案都将保持缩放或调整图像大小而不切断边，这不是我想要的。对不起
我以前通过将高度设置为特定的像素高度而不是百分比来完成此操作。您是否能够通过将宽度指定为 px 而不是 % 来成功实现相同的效果？
使用特定的像素大小将删除我从使用引导程序中获得的动态设计。目前我正在用仅在移动设备上运行的新图像文件重写 html。
明白。抱歉，我无法提供更多帮助

【解决方案2】：

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

【讨论】：

twitter-bootstrap-rails(2.2.8) gem 中不存在图像响应类