3

2048 x 1496 のサイズの画像のセットがあります。これは iPad Retina ディスプレイにのみ使用しています。私のウェブサイトは iPad Retina のみを対象としているため、今のところダウン サンプリングなどについて心配する必要はありません。Retina ディスプレイ専用の Web ページを作成しました。

画像を指定するcssとhtmlがあります（背景画像として）。しかし、Retina でページを見ると、完全には見えず、部分的にしか見えません。

画像が実際には 2048 x 1496 ピクセルであるのに、これはなぜですか? やるべき設定はありますか？

4

2 に答える 2

4

大きな網膜画像を背景として持つ要素に「background-size」プロパティを設定しようとしましたか?

次のようになります。

#retinaImage {
 background: url(images/huge-retina-image.jpg) no-repeat;
 width: 1024px;
 height: 768px;
 background-size: 1024px 768px;
}

iPad の解像度は 2048x1536 ですが、「CSS ピクセル」では 1024x768 のままです。これらの CSS ピクセルのそれぞれに 4 つのデバイス ピクセルが含まれているだけです。概念的には、これに頭を悩ませるのは難しいかもしれません。役立つ記事は次のとおりです。

Retina Web に向けて (Smashing Magazine)

于 2012-11-14T00:56:24.797 に答える
1

Chris による記事の共有 ( Towards A Retina Web ) をお読みください。2048 x 2744 を使用する必要はありません。1024 X 768 解像度の画像で十分です。Ipad Ratina ディスプレイは、その解像度を自動的に処理します。

1024 X 768 の解像度を使用してください。ファイルサイズが小さいほど、表示画像が自動的に改善されます。CSS で背景サイズを使用する必要はありません。

于 2012-11-14T04:34:13.653 に答える