35

srcsetモバイル アプリで HTML img 属性の使用を開始する方法を知りたいです。または、画像解像度の問題を解決するのに役立つ他の jQuery プラグインはありますか。

<img srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x" alt="Banner Image" />
4

3 に答える 3

39

つまり、Srcset異なる画面サイズ/向き/表示タイプに対して異なる種類の画像を指定できる新しい属性です。使用方法は非常に簡単です。次のようにカンマで区切って多くの異なる画像を提供するだけです: <img src="image.jpg" alt="image" srcset="<img> <descriptor>, ..., <img_n> <descriptor_n>">. 次に例を示します。srcset="image.jpg 160w, image2.jpg 320w, image3.jpg 2x"

これは、物事をより詳細に説明する長い回答です。

srcset と picture の違い。srcsetとはpictureほぼ同じことを行いますが、微妙な違いがあります。pictureブラウザーが使用する画像を指示するのに対しsrcset、ブラウザーに選択肢を与えます。ビューポートのサイズ、ユーザーの設定、ネットワークの状態など、さまざまな要素を使用してこの選択を選択できます。のサポートsrcsetは非​​常に優れており、現在のほとんどすべてのブラウザーが多かれ少なかれサポートしています。picture要素のある状況は少し悪いです。

記述子は、リソースの背後に隠されているイメージの種類を示す方法にすぎません。さまざまな種類の記述子があります。

  • 密度記述子。srcset="image.jpg, image-2X.jpg 2x" ディスプレイ密度値 (1x、2x など) は、ディスプレイ密度記述子と呼ばれます。表示密度記述子が指定されていない場合は、1x と見なされます。Retina ディスプレイをターゲットにするのに適したバリアントです。
  • 幅記述子。srcset="image-240.jpg 240w, image-640.jpg 640w". これは自明だと確信しています。唯一の問題は、幅記述子自体があまり役に立たないことです。なんで？ここを読む
  • size descriptor。幅記述子を使用する場合にのみ意味があります。srcset="image-160.jpg 160w, image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w" sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">. ブラウザーへの指示は次のようになります。(max-width: 480px) 100vw— ビューポートの幅が 480 ピクセル以下の場合、画像はビューポートの幅の 100% になります。(max-width: 900px) 33vw— ビューポートの幅が 480 ピクセル以下の場合、前のメディアの状態により、このルールに到達することはありません。254px はメディア条件がリストされていない場合です。長さは、他のメディア条件が満たされない場合に使用されるデフォルト値と見なされます。

完全を期すために、CSS の背景画像用のimage-set()属性と、その他の役立つリンクがここにあることをここに追加します。

于 2015-08-29T10:36:10.880 に答える
1

srcsetこれは、属性とその使用方法に関する優れた記事です。srcetさまざまなビューポート サイズに表示される一連の画像を宣言できます。たとえば、banner-phone-HD.jpeg が最高の解像度になります。

例:

<img alt="my awesome image"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x">

上記は、ビューポート幅が 640px 未満のデバイスに banner-phone.jpeg を、小さな画面の高 DPI デバイスに banner-phone-HD.jpeg を、画面が 640px を超える高 DPI デバイスに banner-HD.jpeg を、および banner.jpeg を提供します。他のすべてに。

同じ効果を生み出すために使用できる CSS メディア クエリなどの他の方法もあります。

これに役立つ JQuery プラグインは知りません。

于 2013-10-28T16:58:51.307 に答える