2013-02-11 43 views
0

我正在設計一個網站與視網膜圖像。它適用於macbook pro和iphone上的safari。但是,在MacBook Pro上使用Chrome版本24.0時,只能看到1/4的視網膜圖像。視網膜設計與谷歌鍍鉻的css

我有一個標誌與大小爲300px X 83px和視網膜我有一個視網膜標識與大小600px的X 166px

我的代碼(與DOCTYPE HTML在前):

<html> 
<head> 
<title></title> 
<style> 
.headerlogo {width:300px;height:83px;background: url(logo300.png); 
background-size: 300px 83px;padding:0px;margin:0px} 


@media (-webkit-min-device-pixel-ratio: 1.5), 
(-o-min-device-pixel-ratio: 3/2), 
(min--moz-device-pixel-ratio: 1.5), 
(min-device-pixel-ratio: 1.5), 
(min-resolution: 1.5dppx) { 

.headerlogo  {;background: url(logo600.png);} 
} 

</style> 
</head> 
<body> 
<div class="headerlogo"></div> 
</body> 
</html> 
+0

試過「背景大小:100%;」 ? – 2013-02-11 14:40:01

回答

0

你有流氓分號:

.headerlogo  {;background: url(logo600.png);} 

應該是:

.headerlogo  {background: url(logo600.png);} 

您可能必須再次爲較大尺寸的視網膜圖像指定background-size屬性。

嘗試增加 「僅屏幕」,看看有沒有什麼幫助的事項:

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), 
    only screen and (-moz-min-device-pixel-ratio: 1.5), 
    only screen and (-o-min-device-pixel-ratio: 3/2), 
    only screen and (min-device-pixel-ratio: 1.5), 
    only screen and (min-resolution: 1.5dppx) { 

     .headerlogo { 
      background: url(logo600.png); 
     } 

} 
+0

我試過你的代碼,但仍然是同樣的問題。 – Paul 2013-02-11 15:23:52

+0

你能提供一個鏈接到你的頁面或創建一個jsfiddle複製問題? – 2013-02-11 15:28:27

0

嘗試 「背景尺寸:100%;」 我不確定所以我把它作爲評論,但我認爲你沒有看到它。

+0

謝謝,嘗試。但它沒有幫助。 – Paul 2013-02-11 15:22:34