Question

我正在使用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％，并且每个图像只需要~250px宽。但是，在750像素宽的屏幕上，div垂直堆叠占据视口宽度的100％，因此每个图像需要~750px宽。

我以为我可以这样做：

默认情况下，加载spacer.gif：<img src="spacer.gif" />
在页面加载时，检查图像的宽度，并加载适当的大小

但后来我意识到这对非JavaScript用户不起作用。我可以默认加载一个小图像，但是非JS用户在大屏幕上获得了不好的体验，而且一些用户还必须加载小图像和大图像。

有什么建议吗？

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请求标头中的用户代理，然后根据他们对浏览器的规范提供预定的大小。

Answer 2

如果您尝试解决此客户端问题，可以使用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可用的后备;用户只需获取small.jpg，这将适用于禁用javascript的旧手机。

(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 个答案: