5

データ URI スキームを使用して css に埋め込まれた画像が、「通常の」解像度の Retina 画面に表示されることに気付きました。Retina ディスプレイに必要な解像度で画像を埋め込むにはどうすればよいですか?

倍解像度 (@2) の PNG を CSS に埋め込もうとはしませんでしたが、画像のサイズが定義されていない場合、通常の画像と同様に倍のサイズで表示されるのではないかと思います。

4

2 に答える 2

5

2つの画像の解像度は同じですが、dpiは異なります。これはRetinaディスプレイの重要な部分であるため、異なるdpiの画像の2つのバージョン（網膜がないもののために帯域幅を保存したい場合）が必要です。

cssにルールを追加する方法、およびいくつかのdpi値の詳細については、Retinaディスプレイメディアクエリを参照してください。

編集 @carlos-r-balebonaからのコメントで指摘されているように、画像をCSSに埋め込んだ場合、両方のバージョンが常に送信されるため、bandwithは保存されません。適切なURLのみがダウンロードされるため、画像のURLを使用した場合にのみ保存されます。

例を挙げて編集

OK、ここに例があります：

2つの画像（data：image / png; base64、{192_dpi_encoded_image}）と（data：image / png; base64、{96_dpi_encoded_image}）があるとします。

ここで、背景画像を次のように設定するdivがあるとします。

<div id="a" style="width: 100px; height:100px;">
</div>

そしてあなたのCSSで：

@media only screen
{
     #a
    {
        background:url(data:image/png;base64,{96_dpi_encoded_image});
    }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx){
    #a
    {
        background:url(data:image/png;base64,{192_dpi_encoded_image});
    }
}

条件付きの最後の@mediaは、網膜画面が存在する場合にのみ、前に設定された背景画像を上書きします。したがって、必要に応じて大きなdpi画像を設定します。

お役に立てれば。

于 2013-01-25T14:14:22.270 に答える
1

背景のサイズをピクセル単位で設定できます (画像の解像度が 2 倍の場合、値は元のサイズを 2 で割った値になります)。

.element {
  background-image: url(data:image/png;asdkfasdkf);
  background-size: 25px 50px;
}
于 2015-11-23T09:38:56.133 に答える