当图像宽度与视口宽度不成比例时响应图像？答案

【问题标题】：Responsive images when image width is not proportional to viewport width?当图像宽度与视口宽度不成比例时响应图像？
【发布时间】：2012-07-08 04:11:57
【问题描述】：

我正在使用 Twitter Bootstrap 的 responsive grid，我想在我的页面中包含一些图片，如下所示：

<div class="row">
<div class="span3"><img src="img1.png" /></div>
<div class="span3"><img src="img2.png" /></div>
<div class="span3"><img src="img3.png" /></div>
<div class="span3"><img src="img4.png" /></div>
</div>

但是，很难使图像具有响应性，因为使用 Bootstrap 图像宽度与视口宽度没有直接关系，这排除了例如Filament 方法。

在上面的示例中，在 1080 像素宽的屏幕上，图像堆叠在一起，因此每个 div 占用的视口宽度不到 25%，并且每个图像只需要大约 250 像素宽。但是，在 750 像素宽的屏幕上，div 垂直堆叠以占据 100% 的视口宽度，因此每个图像需要大约 750 像素宽。

我在想我可以这样做：

默认情况下，加载一个 spacer.gif：<img src="spacer.gif" />
在页面加载时，检查图片的宽度，并加载合适的尺寸

但后来我意识到这不适用于非 JavaScript 用户。我可以默认加载小图像，但非 JS 用户在大屏幕上的体验很差，一些用户还必须同时加载小图像和大图像。

有什么建议吗？

【问题讨论】：

尝试改用row-fluid。

标签： javascript css image twitter-bootstrap responsive-design

【解决方案1】：

如果你想解决这个客户端，你可以使用PictureFill

基本上，它实现了与提议的 element in W3C 类似的解决方案。您可以将以下内容插入到您的标记中（来自 PictureFill 网站上的示例）：

<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    <div data-src="small.jpg"></div>
    <div data-src="medium.jpg"     data-media="(min-width: 400px)"></div>
    <div data-src="large.jpg"      data-media="(min-width: 800px)"></div>
    <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>

    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    </noscript>
</div>

<noscript> 避免了浏览器必须下载 spacer.gif 并在没有可用 JS 的情况下作为备用；用户只需获得适合禁用 javascript 的旧手机的 small.jpg。

(min-width: ...) 媒体查询允许您根据设备大小选择断点，您还可以将(min-device-pixel-ratio: 2.0) 用于 Retina 显示器等高清设备。

出于您的目的，您可以设置如下内容：

 <div data-src="image_250x250.jpg"     data-media="(min-width: 1080px)"></div>
 <div data-src="image_750x750.jpg"     data-media="(min-width: 750px)"></div>

并在您的 css 中使用媒体查询来确保 250x250 图像堆栈。

希望有帮助！

【讨论】：

【解决方案2】：

如果您主要关心的不是在移动设备上加载不必要的大图像，并且您正在寻找非 JS 选项，那么您可能会发现类似 Sencha.io Src 的内容很有用。基本上，您通过 Sencha 路由所有图像：

<div class="row">
  <div class="span3"><img src="http://src.sencho.io/http://yourimageserver.com/img1.png" /></div>
  <div class="span3"><img src="http://src.sencho.io/http://yourimageserver.com/img2.png" /></div>
  <div class="span3"><img src="http://src.sencho.io/http://yourimageserver.com/img3.png" /></div>
  <div class="span3"><img src="http://src.sencho.io/http://yourimageserver.com/img4.png" /></div>
</div>

Sencha 服务器然后检查 HTTP 请求标头中的用户代理，然后根据他们对浏览器的规范提供预定大小。

【讨论】：