当图片宽度与视口宽度不成比例时如何实现响应式图片？

Question

我正在使用Twitter Bootstrap的响应式网格，我想将一些图片包含在我的页面中，如下所示：

<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用户在大屏幕上会得到糟糕的体验，并且一些用户还必须加载小图像和大图像。

有什么建议吗？

- flossfan

---

尝试使用 row-fluid 替代。 - Justin D.

Answer 1

如果您的主要关注点不是在移动设备上加载过大的图像，并且您正在寻找一种非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请求头中的用户代理，然后根据他们对浏览器的规格设定，提供一个预定大小的服务。

- merv

Answer 2

如果您正在尝试在客户端解决此问题，您可以使用PictureFill。

基本上，它实现了类似于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像素的图片可以堆叠在一起。

希望这有所帮助！

- francisbyrne