0

Retina 用の画像を含む Web サイトをデザインしています。macbook pro と iphone の safari で問題なく動作します。しかし、Mountain Lion を搭載した MacBook Pro の Chrome バージョン 24.0 では、網膜画像の 1/4 しか表示されません。

サイズが 300px x 83px のロゴがあり、Retina の場合、サイズが 600px x 166px の Retina ロゴがあります。

私のコード（最初に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>
4

2 に答える 2

0

「background-size:100%;」を試してください。よくわからないのでコメントとして入れましたが、あなたは見ていないと思います。

于 2013-02-11T15:18:04.313 に答える
0

あなたは不正なセミコロンを持っています:

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

次のようにする必要があります。

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

大きいサイズの Retina イメージに対しても、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);
        }

}
于 2013-02-11T14:53:02.713 に答える