圖像寬度與視口寬度不成比例時的響應圖像？

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的圖像疊加。

希望有幫助！