在自適應佈局和響應佈局中處理圖像

1

如果你想images也responsive（調整大小），然後sprite不是一個好主意。最好作爲一個單一的圖像使用但如果圖像不是responsive（調整大小），那麼你可以用作精靈。

永遠不要給sprites中的background任何響應元素。這是height & width應該是固定的。

2012-05-09 13:03:51 sandeep

+0

I同意你所說的和我所假設的，這是最近被遵循的優先做法，我在這裏所做的是有一種方法可以動態調整原始精靈的大小，使其與所服務的屏幕成比例並調整背景座標以符合此維度。通過這個我打算使圖像可重複使用的多維度。我也明白這種方法可能會影響圖像質量，因此不適用於高端解決方案。 –

0

馬特威爾考克斯的自適應圖像可能是你在追求什麼。

http://adaptive-images.com/

這需要用戶使用的瀏覽屏幕尺寸考慮，並提供了根據可用大小圖像的緩存大小的版本。

它基本上尋找較小的緩存圖像，如果找到它們就會提供它們，如果它們不存在，則將它們提供。

來源

2012-05-09 15:13:33 SpaceBeers

+0

這仍然是使用@media查詢實現的。我喜歡爲不同屏幕尺寸提供條件場景的媒體查詢邏輯。但是特定圖像必須爲有針對性的屏幕創建的事實是一個冗餘過程，並且每次調用這些圖像都是額外的負擔。我的意思是，我試圖找出一種方式（如果存在的話）創建圖像的方式，使其可以在不失真的情況下重新調整大小，並提供多種屏幕尺寸。 –

+0

「然而，這不是一個真正的長期解決方案，不僅僅是因爲cookie競爭條件和CDN /代理緩存不兼容性，我們真正需要的是在未來處理這些問題的一些標準化方法。這個para在網站上退出（http://adaptive-images.com/details.htm）。這個項目是一個非常有趣的方法和主動，但是限制（只有php，沒有CDN和cookie依賴）是足夠大的可以忽略的。 –

+0

到目前爲止，這是我找到的最好的方法，但如果你一次在屏幕上提供不同大小的圖像，它會下降。我期待着構建自己的版本，並將其考慮在內，但這是迄今爲止我發現的最好的版本。 – SpaceBeers

1

你可以試試這個方法：Stretchy Sprites（指令&演示） - 純HTML /與background-size

來源

2012-05-31 02:46:34 tobyj

+0

這是希望在自適應設計中使用CSS精靈的解決方案的寶石。我仍然試圖讓我的灰色問題了解代碼和whys，但如果它的工作方式和你的例子一樣有前途，我會很樂意給你一個大男人主的擁抱！ – Kayote

1

在我的經驗，不依賴CSS，響應式設計是成功的一半進行動態/可調整大小的內容（柔性盒，矢量/可縮放圖像等），一半使用媒體查詢 - 所以是的一部分可以通過媒體查詢使用條件圖像選擇。

至於可縮放的圖像，你是否在談論更多關於需要保持高質量的圖標/小圖像或大/用戶上傳的圖像？

對於圖標/小圖片（比如你會放一個PNG圖片精靈），我想嘗試矢量圖像，這是無限擴展：

圖標字體（僅適用於單色圖標，但可以用CSS定義樣式所以他們很容易的工作）：

http://css-tricks.com/examples/IconFont/ http://fortawesome.github.com/Font-Awesome/#base-icons

軟件需要：矢量圖像編輯器（Adobe Ill ustrator，Inkscape）和字體編輯器（FontCreator，FontForge）。

SVGs - 有點複雜，但可以處理更復雜的圖形。

軟件需要：矢量圖像編輯器（我建議Adobe Illustrator中）下面是SVG的一個完全可調整大小的頁面，沒有媒體查詢的例子： http://emacsformacosx.com/

優點矢量圖形是，他們將在任何屏幕尺寸上工作，他們通常加載速度更快（較小的文件大小），所以如果你認真對待「快速響應」，我會嘗試做所有事情。

這只是「冰山一角」，可以這麼說 - 如果您有特定的問題，很高興分享更多;我花了一段時間才弄清楚如何獲得軟件設置並實現上述跨瀏覽器（例如4.0以下的Android不支持SVG，所以我不得不依賴於.png精靈，並且我編寫了一個JavaScript文件，允許調整大小精靈 - 類似於「彈性精靈」的帖子） - 這是圖標字體的另一個優點，如果你可以脫離單一顏色的圖標。

來源

2012-05-31 18:20:18

+0

SVG很棒，但是非支持瀏覽器的份額很大。任何你想建議的polyfill？ –

+0

你在哪裏根據你的評論「非支持瀏覽器的份額是顯着的」？支持（至少對於基本的SVG）是強大的：http://caniuse.com/#search=svg我擔心的唯一不支持的瀏覽器是Android 2.3及更低版本。爲此，我使用canvg填充：http://code.google.com/p/canvg/ –

0

我最近在這個問題上回顧了很多材料。有很多方法可用，但都不是絕對的。我使用背景圖像（背景大小：包含或背景大小：封面）爲靜態的所有圖像（圖像等）。但是，動態生成的圖像很難在優雅（非腳本）範例中管理。因此，在閱讀了很多腳本之後，我只寫了自己的腳本。我希望這有助於：

/** 
* Retina image update script. Invoke with Retina.render(). 
* Retina.render() may be passed a selector for img selection. 
* The default filter looks for img's with data-scale="retina". 
* @param {string|function} expr A CSS selector expression or jQuery filter function. 
* @return {boolean|collection}  Returns false or (for Retina displays) the images updated. 
* @author Joe Johnson 
*/ 
(function(ns,$){ 
    ns.Retina = { 
     render: (function(isRetina){ 
      return isRetina ? function(expr){ 
       var r1 = /retina/i, r2 = /\d{3}/, 
        filter = expr ? expr : function(){ 
         return r1.test($(this).data("scale")); 
        }; 
       return $("img").filter(filter).each(function(){ 
        this.src = this.src.replace(r2,function(m){ 
         return (parseInt(m,10)>=640 ? m : 2*m); 
        }); 
       }); 
      } : function(){ return false; }; 
     })(ns.devicePixelRatio && (ns.devicePixelRatio > 1)) 
    }; 
})(window,jQuery);

應當注意的是，你仍然需要依靠一些文件名約定（在這種情況下，2 - 正則表達式 - 正在尋找與圖像src屬性目錄基於尺寸的值[img/blah/320/image.jpg獲取更新到img/blah/640/image.jpg]。已經有一個包含數字大於640的目錄的src的圖像將被跳過，假設它們已經足夠大，可以用於Retina顯示器（我使用過的站點在images/img/dir/320 /，/ img/dir/640和/ img/dir/960目錄中具有圖像）

來源

2012-09-08 02:08:20

在自適應佈局和響應佈局中處理圖像

回答

相關問題