Responsive css sprite + retina

Question

我在最後幾天看了很多關於這個話題的文章，但是我沒有找到解決方案。我有兩個精靈集，一個低質量的普通顯示器和一個高質量的視網膜顯示器。

我的問題是，我的網站必須響應，圖形應根據瀏覽器窗口調整大小。但與background-size屬性，似乎我不能告訴瀏覽器調整精靈的大小。以下是我走到這一步：

#logo-img { 
    max-width: 100%; 
    text-indent: -9999px; 
    height: 85px; 
    width: 360px; 
    background-image: url('/images/sprites-sa026cef942.png'); 
    background-position: 0 -2609px; 
    background-repeat: no-repeat; 
    overflow: hidden; 
    outline: 0 none !important; 
    display: block; 
    white-space: nowrap; 
} 
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) { 
    #logo-img { 
     background-image: url('/images/sprites-retina-se61e802cf4.png'); 
     background-position: 0 -2601px; 
     -webkit-background-size: 360px, auto; 
     -moz-background-size: 360px, auto; 
     -o-background-size: 360px, auto; 
     background-size: 360px, auto; 
    } 
} 

的HTML是

<a href="#" id="logo-img"> 
    <h1>My logo text</h1> 
</a> 

一切工作正常，但在移動設備上，或者在調整瀏覽器窗口。徽標被切割，並且不會調整到瀏覽器窗口的大小。我在玩max-width: 100%;和height: auto;，但這隻影響輪廓，而不是內部的精靈。

希望任何人都知道解決方案。它不必是IE8的兼容，但它會很高興;）

編輯 使用精靈，我用background-size: contain;確保，背景圖像被調整到元素的大小前：

#logo-img { 
    background:url(../images/sprites-retina/logo.png) no-repeat center center; 
    background-size: contain; 
    max-width: 100%; 
    text-indent:-9999px; 
    height: 85px; 
    width: 360px; 
    overflow: hidden; 
    outline: 0 none !important; 
    display: block; 
    white-space: nowrap; 
} 

這很好，但我不能使用spritesheet。也許這就說明了我的意思。

EDIT2

我做了一個小提琴http://jsfiddle.net/euvRD/2/

Answer 1

我認爲你需要從background-size行刪除逗號，你可能要設置高度爲85px還有：

-webkit-background-size: 360px 85px; 
-moz-background-size: 360px 85px; 
-o-background-size: 360px 85px; 
background-size: 360px 85px; 

但我想這裏的逗號是主要問題。這對你有幫助嗎？