web-dev-qa-db-ja.com

レスポンシブimgがsrcsetから間違った画像を取得する

Google Chrome=シークレットモードでテストし、毎回「空のキャッシュとハードリロード」でページをリロードします。

次のHTMLレスポンシブ画像があります。

<img class="content-img" src="/app/uploads/2018/07/1400x750.png" 

srcset="/app/uploads/2018/07/1400x750.png 1400w, 
        /app/uploads/2018/07/1400x750-768x411.png 768w, 
        /app/uploads/2018/07/1400x750-1280x686.png 1280w, 
        /app/uploads/2018/07/1400x750-520x279.png 520w, 
        /app/uploads/2018/07/1400x750-420x225.png 420w, 
        /app/uploads/2018/07/1400x750-340x182.png 340w, 
        /app/uploads/2018/07/1400x750-600x321.png 600w" 

sizes="(max-width: 666px) 100vw, (max-width: 1399px) 38vw, 535px" 
>

予想される動作：

1。ビューポートの幅0px-666px：

  • ブラウザは、ビューポートのピクセル幅全体を使用する必要があります。 450px、そして幅が450pxより大きいsrcsetから最小のsrcを選択します。この場合は「/app/uploads/2018/07/1400x750-520x279.png」

2。ビューポートの幅667px-1399px：

  • ブラウザは、ビューポートの幅の38％を占める必要があります。 380px @ 1000pxビューポート。幅が380pxより大きいsrcsetから最小のsrcを選択します。この場合は「/app/uploads/2018/07/1400x750-420x225.png」

。ビューポートの幅1400+ px：

  • ブラウザはデフォルトの535pxを使用し、srcsetから幅が535pxより大きい最小のsrcを選択する必要があります。この場合は、「/ app/uploads/2018/07/1400x750-600x321.png」です。

実際の動作：

上記のすべての例のimgで開発ツールのinspect要素を使用してGoogle Chromeでテストすると、それぞれの場合の結果の「CurrentSrc」は次のようになります。

  1. /app/uploads/2018/07/1400x750-520x279.png （CORRECT）

  2. /app/uploads/2018/07/1400x750-1280x686.png （INCORRECT（予想420px幅））

  3. /app/uploads/2018/07/1400x750.png （INCORRECT（幅600pxが必要）

私は頭をかき残しました、他の同様の質問はすべてこれをグーグルに要約しているようですChromeキャッシュの問題ですが、私はテストするときにその問題を排除するように注意してきましたが、それでも私はしませんt期待するsrcイメージを取得します。

希望する動作に対して正しい「サイズ」属性を記述したことを確信しているのは90％だけです。レスポンシブなCSSブレークポイントに合わせて、コンテキストに応じて適切な画像の幅を読み込もうとするため、ロジックは少し複雑であることに注意してください。

htmlimagemedia-queriessrcset
10
mike-source

srcsetおよびsizes属性がブラウザが表示する画像を選択する方法を定義する方法についてのいくつかの説明（詳細は Responsive images を参照）。

最初に、ブラウザはsizes属性をチェックして、現在のデバイス幅に適用される最初のメディア条件を見つけます。したがって、指定したブレークポイントについて、ブラウザは、選択された画像をビューポートの全幅で666pxまでのデバイスで表示し、次にビューポートの幅の38％で667pxから1399pxまでのデバイスで表示し、最後にデバイスの固定の535px幅で表示する必要があります。幅が1399pxより大きい。

次に、ブラウザはsrcset属性をチェックして、（上記のように）sizes属性で決定された画像スロットサイズに最も近い画像を見つけます。

したがって、指定したブレークポイントについては、次のことを期待してください。

1）幅が666pxまでのデバイスの場合、ブラウザはデバイスの幅に最も近い画像の幅を選択する必要があります（デバイスの幅より大きい最小の画像ではありません）。

例：

450px幅のデバイスでは、ブラウザは420w画像を選択する必要があります。

599px幅のデバイスでは、ブラウザーは600w画像を選択する必要があります。

2）幅が667pxから1399pxのデバイスの場合、ブラウザはデバイスの幅の38％に最も近い画像の幅を選択する必要があります。

例：

1000px幅のデバイスでは、ブラウザーは340w画像または420w画像のいずれかを選択する必要があります（メディアクエリによって決定される画像スロットサイズは380pxであるため、違いを分割するときにどのように選択されるかわかりません）。

1366px幅のデバイスでは、ブラウザーは520w画像を選択する必要があります（メディアクエリによって決定されるスロットサイズは519pxであるため）

3）1399px幅を超えるデバイスの場合、ブラウザーは520w画像を選択する必要があります（メディアクエリによって決定されるスロットサイズは固定の535pxであるため）。

注：Retinaやその他の高解像度ディスプレイは、計算を少し変更し、ブラウザが上記の各例で選択する画像の幅を多かれ少なかれ2倍にします（参照 レスポンシブ画像：解像度を変更するには、srcset ）を使用します。

いくつかの潜在的な問題を再確認する必要があります。 <meta name="viewport" content="width=device-width">をヘッドに追加すると、テストするデバイスは、ページをロードするときに実際の幅を採用するように強制されます。また、イメージの表示に干渉するcssまたはjsが競合していないことを確認してください。

落とし穴を回避した場合、コードは他の点では問題なく見え、以下の同様のスニペットで期待される結果が得られますが、すでに気づいたようにテスト時にはキャッシュに注意する必要があります（わずかに異なる組織は、より迅速にスキャンするのに役立つ場合があります）画像は異なる状況下で選択する必要があります）。以下は、テストに役立つ幅を示すプレースホルダー画像を使用したスニペットです。

<img srcset="https://via.placeholder.com/340x182 340w,
             https://via.placeholder.com/420x225 420w,
             https://via.placeholder.com/520x279 520w,
             https://via.placeholder.com/600x321 600w,
             https://via.placeholder.com/768x411 768w,
             https://via.placeholder.com/1280x686 1280w,
             https://via.placeholder.com/1400x750 1400w"
     sizes="(max-width: 666px) 100vw,
            (max-width: 1399px) 38vw,
            535px"
     src="https://via.placeholder.com/340x182"
     alt="placeholder image">
5
benvc