1

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

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

<img class="desktop-hero" alt="" src="../img/hero_desktop.jpg" srcset="../img/hero_mobile.jpg 768w, ../img/hero_desktop.jpg 1x" />
4

1 に答える 1

3

編集して追加: よ、どのチュートリアルからそのマークアップを取得しましたか? これは、誰も実装したことがなく、悪い考えだった古い srcset 構文を使用しようとしているように見えることに気付きました。どこで入手したかを指摘していただければ、そのチュートリアルを更新して、より多くの人が同じ間違いを犯すのを防ぐことができます.

まず、w と x を混在させることは無効です。これは問題の直接の原因ではありませんが、完全に予測不可能な動作が発生します。( w 記述子は、その値と属性の値に基づいて、同等の x 記述子に変換されsizesます。)

第二に、 w 記述子は、あなたが求めているようなことをしません。ページ上の画像の最終的なサイズが単一のハードコードされた px 値ではない場合に、sizes画像の密度を間接的に指定する方法として、属性とともに使用されます。画面のサイズとは何の関係もありませんし、何も隠しません。これは、イメージ ピクセル単位のイメージの幅です。

ここで、hero_desktop と hero_mobile が実際には異なる画像 (異なるサイズ、異なる切り抜き、異なるコンテンツなど) であり、同じ画像の異なる解像度のバージョンではないと仮定すると、実際にやりたいことは次のようになります<picture>。

html:

<picture>
  <source media="(min-width: 768px)" srcset="../img/hero_desktop.jpg">
  <img src="../img/hero_mobile.jpg">
</picture>

これにより、画面が >= 768px の場合はデスクトップ イメージが選択され、それ以外の場合はデフォルトでモバイル イメージが選択されます。

一方、デスクトップとモバイルの画像が同じ画像で、解像度が異なるだけの場合は、 を使用する必要がありますが、いずれかまたは両方に<img srcset>固執します。画像が静的サイズの場合、または「ネイティブ」サイズが許可されている場合に使用します。レイアウトによって画像が特定のサイズに設定されている場合は、(および)を使用します。次に、イメージがいつ切り替わるかについて心配する必要はありません。物事を正しく宣言していれば、ブラウザは妥当な選択をしてくれます。xwxwsizes

于 2015-10-07T21:04:23.297 に答える