2

このウェブサイトで：

  • .php

  • .jquery

  • .yii ベース

ビューポートの幅に応じて、2 つ以上の異なるインフォグラフィック画像が必要です。

  • クライアントは w3c 検証にうるさい

  • ピクチャフィル ソリューションが検証されない

  • 異なる画像バージョンだけでなく、異なる画像を提供する必要があります

  • 多くの理由で、背景画像は解決策ではありません*

  • IE8 以上のサポート

サーバー側またはクライアント側のバージョンを使用できますが、問題ありません。

理由:

  1. 背景画像の手法は機能しますが、それらのインフォグラフィックは背景ではありません。

  2. それらはサーバー側に到着するはずです。

  3. 明らかに、彼らは適応する必要があります。（そして背景サイズ...まあ...）

  4. さらに悪いことに、これらのインフォグラフィックに関連付けられたレスポンシブ ツールチップ イメージ マップがあります。

4

3 に答える 3

3

メディア クエリが必要でない場合は、response.jsを使用します。正しく行われていれば、 もロードできます<img>。次に例を示します。

<-- Load lo-fi.png  when viewport is 0–480px wide or no-js. 
    Load medium.png when viewport is 481–1024px wide. 
    Load hi-fi.png  when viewport is 1025px+ wide. --> 

<img src="lo-fi.png" data-src481="medium.png" data-src1025="hi-fi.png" alt="example" />
于 2012-10-06T14:56:04.507 に答える
2

プロパティを使用background-imageしてから、メディアクエリを使用して、ビューポート幅ごとに変更できます。

ところで、W3C の検証に関する限り、公式の検証ツールがまだない HTML5 でサイトを作成している可能性があります ;)

于 2012-10-06T14:29:46.907 に答える
1

メディアクエリを使用できます。 http://css-tricks.com/css-media-queries/

http://cssmediaqueries.com/

コンテナに別のスタイルを適用し、ビューポート サイズに基づいて画像を交換するだけです。もちろん、これには img タグを使用するのではなく、画像を背景として設定する必要があります。

于 2012-10-06T14:30:25.633 に答える