-1

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

<img class="hero" src="/assets/images/Food-Spread-500x167.jpg" alt="banner image" sizes="(min-width: 992px) 80vw, 100vw"
srcset="/assets/images/Food-Spread-500x167.jpg 500w,
        /assets/images/Food-Spread-768x256.jpg 768w,
        /assets/images/Food-Spread-992x331.jpg 992w,
        /assets/images/Food-Spread-1200x400.jpg 1200w">

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

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

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

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

4

1 に答える 1

1

  1. お好きな方をお選びいただけます！従来のデスクトップ ブラウザーに最も適したものと、従来のモバイル ブラウザーに最も適したものとの間でトレードオフを行う必要があります。

  2. ここでの問題は、Safariが記述子でサポートsrcsetしているが、 orではサポートしていないことです。属性が無視され、最初の候補が「1x」として選択されるか、( Safari のバージョンに応じて) のすべての候補が無視され、代わりに使用されます。したがって、おそらく 500x167 の画像が 500 CSS ピクセル幅でレンダリングされ、(320 CSS ピクセル幅) ビューポートからオーバーフローします。xwsizessizessrcsetsrcsetsrc

    これを修正するには、次の 2 つの方法があります (必要に応じて両方を実行できます)。

    • wピクチャフィルを使用すると、サポートが追加されsizes、固有のサイズ変更が行われます。
    • CSS で幅を設定します。.hero { width:100% } @media (min-width: 992px) { .hero { width:80% } }
于 2015-09-22T07:42:32.760 に答える