图像宽度与视口宽度不成比例时的响应图像？

Question

我使用Twitter的引导的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> 

然而，很难使图像响应，因为引导图像宽度与视口宽度不直接相关，这就排除了例如Filament方法。

在上面的示例中，在1080像素宽的屏幕上，图像堆叠使每个div占用小于视口宽度的25％，并且每个图像只需要约250px宽。但是，在750像素宽的屏幕上，div垂直堆叠占据视口宽度的100％，因此每个图像的宽度应为〜750px。

我想我可以做这样的事情：

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

但后来我意识到这不适用于非JavaScript用户。默认情况下，我可以加载一个小图片，但是非JS用户在大屏幕上会遇到不好的体验，而且一些用户也需要加载小图片和大图片。

任何建议？

Answer 1

如果您的主要担忧是不在移动设备上加载不必要的大图像，并且您正在寻找非JS选项，那么可能您会发现像Sencha.io Src这类有用的东西。基本上，你的路线所有的图像通过煎茶：

<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> 

的煎茶服务器然后检查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可用;用户只需获取适用于JavaScript禁用的旧手机的small.jpg。

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

你的目的，你可以设置类似：

<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的图像叠加。

希望有帮助！