0

以下のリンクの続きです

Retina 対応の画像の準備 (web)

非常に多くの単語が人によって意味が異なるため、これは明確化です。Retina デバイスと非 Retina デバイスの両方で適切に見える 1 つの画像があるようです。

画面上の画像の最大幅を 400、最大高さを 300 にする場合、画像自体は 800 x 600、ppi は 144 にする必要があります。次に、ダウンロード時間を最小限に抑えるために、ファイルを高度に圧縮する必要があります。

画像を表示するときは、次のように css/html コードを使用して最大幅と最大高さに強制します。

<img src:"imagethatis800x600.jpg" style="width:400px; height:300px;" width="400" height="300" />

これは正しいです？(当社ではresponsive.jsやcdnを使用しないことは既に解決済みです。)

4

3 に答える 3

0

新しいレスポンシブ画像HTML5 標準があります。2014 年 7 月の時点では、まだブラウザーのベータ ビルドのみです。しかし、Picturefillポリフィルは既に利用可能です。

この記事では、さまざまなユースケースについて非常によく説明しています。ただし、ここで必要なのは、高解像度 (「retina」など) ディスプレイ用の代替画像を単純に提供することです。

<img srcset="small.jpg 1x, large.jpg 2x"
   src="small.jpg"
   alt="A rad wolf" />
于 2014-07-09T10:54:19.500 に答える
0

より簡単な方法は、 のsrcset属性を使用することですimg。次に、CSS ピクセルごとに異なるデバイス ピクセルで画像を表示できます。

このページを、デスクトップ ブラウザーと、サポートされているブラウザーを搭載した電話の両方で開いてみてください: http://www.webkit.org/demos/srcset/

サポートはまだ限定的ですが、おそらくすぐにサポートが改善されるでしょう: http://caniuse.com/srcset

于 2014-06-20T22:57:39.727 に答える