問題タブ [srcset]

しばらくの間、次のマークアップを使用しています。

これは、picturefill ( http://scottjehl.github.io/picturefill/ ) で完全に機能し、クロスクライアントの問題は発生しません。

これがインライン網膜画像の使用をサポートする有効なマークアップであることを誰かが確認できるかどうか疑問に思っていました. 私は次の理由でこれを使用します。

1. 画像はコンテンツの一部であるため、背景画像は使用できません。
2. Google は srcset-attribute をインデックスに登録していませんが、src-attribute をインデックスに登録しているため、両方を使用しています。したがって、これは主に SEO に関する考慮事項です。
3. これをテストした限りでは、ブラウザが二重の HTTP リクエストを送信していることはわかりませんでした。通常のデスクトップでは src-image を要求し、Retina ディスプレイでは srcset-retina (2x) イメージを要求します。

SEO と retina-display に関連して、src を srcset および picturefill と一緒に使用することに関する情報はほとんど見つかりません。したがって、このマークアップに欠陥がなければ、レスポンシブで SEO に適した画像に対してこのアプローチを使用する人が増えることを願っています。

srcコンテキストに応じて最も適切なものを取得することにより、特定の画像タグをレスポンシブに動作させようとしています。

タグは次のようになります。

このコード スニペット ( http://blog.cloudfour.com/responsive-images-101-part-2-img-required/srcにあります) を試して、毎回どちらが有効かを確認しました。

ただし、ブラウザとその幅に関係なく、 はsrc決して変わらないようです (常に のようです)。image.jpg

src属性の最後のアイテムと同じデフォルトを繰り返すことでsrcset、結果に影響を与えているのではないかと思います。あるいは、決定要因はデフォルトのサイズ ( の最後の項目sizes) である可能性があります。

どうぞよろしくお願いいたします。

メインのヘッダー画像があります：

私が抱えている困難は2つあります。

1. src フォールバックとしてどのサイズを設定する必要がありますか? 最大または最小？IE は srcset をまったくサポートしていないため、ヘッダーとして小さな画像が残ります!! Safari（mac）も苦労しています...

2. 「n'vw 2x」と言う方法がないため、どうすればこれを iPhone で動作させることができますか? (網膜であるため、明らかに自分の 2 倍の大きさであると認識し、必要以上に大きな画像を取得します)。これについて何かできることはありますか??

   前もって感謝します...

私はこれを持っています：

これがスニペットで機能するとは思わないので、ここで確認できます: http://codepen.io/vandervals/pen/ZbOMNR

問題は、1024px の画像が読み込まれると、それmax-width: 100%が機能し始め、画像の表示を実際の幅 (1024px) に制限することです。width:100%代わりに成長し続け、ラッパーの最大幅である 1200px で停止するため、これは起こりません。

なぜこれが機能しないのですか？画像の最大サイズを実際の最大サイズに制限するにはどうすればよいですか?

私が知る限り、属性srcsetとsizes属性は、デバイスのサイズと解像度に合わせて適切にスケーリングされた画像を適用することに重点を置いています。

これらの属性を使用して、画面サイズに基づいて別の画像を選択する機能はないようです。

これは状況の正しい理解ですか？pictureこれは、要素がこのタスクで広くサポートされるまで待たなければならないということですか?

これまでの私の経験が何であるかの簡単な例を作成しました。

1. 160px の画像は読み込まれません。
2. 幅を 147px に変更すると、320px の画像が読み込まれます。
3. 幅を 227px に変更すると、640px の画像が読み込まれます。
4. 幅を 453px に変更すると、1280px の画像が読み込まれます。

ブラウザーの幅が 160px を超えるまでは 160px の画像が読み込まれ、ブラウザーの幅が 320px を超えるまでは 320px の画像が読み込まれる、などと思っていたでしょう。

そうではないのはなぜですか。

編集: stackoverflow は、この例をテストするのに適した場所ではないようです。さまざまなブラウザー サイズを複製するには、コードを自分のブラウザーにコピー ペーストする必要がある場合があります。

ブラウザーが特定の画面サイズに達したときに、srcset 属性を使用して画像を交換しようとしています。画面サイズが幅 768 ピクセルを超える場合にデスクトップ イメージを表示する必要があります。

Firefox を除くほとんどのブラウザで、以下のコードを使用してこれを実現できました。私は「srcset」ゲームにかなり慣れていないので、構文エラーがあるかどうかわかりません。Retina デバイスを念頭に置いて、ここで何が欠けているかを知っている人はいますか? ブラウザの srcset のサポートは適切なようですので、何が原因なのかわかりません。

ドキュメントに css を適用せずに img srcset を使用しているときに、ブラウザーの幅をサイズ変更すると、画像の幅が応答して変化し、画像全体が常に表示されます (ただし、小さくなります)。

標準のイメージタグのように機能するようにするにはどうすればよいですか?

たとえば、ブラウザウィンドウのサイズを変更しても画像サイズは変わりません...