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

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圖像寬度與視口寬度無直接關系，這排除了例如細絲方法。

在上面的示例中，在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

基本上，它實現了與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圖像堆棧。

希望有所幫助！