Q&A
sizesを追加してみましたが、挙動は変わりませんでした。
今回のsizesの意味としては、max-widthが375px以下の場合は280pxがスロット値として与えられ、
srcsetの中で375wが一番近いので、この画像が選ばれるという認識であっていますでしょうか？
前提・実現したいこと
htmlでPC用とスマホ用で画像を切り替えたいと思っています。
今回はsrcsetでのビューポートで切り替えたいと思っているのですが、
以下のようにしてもうまくいきません。
この場合はスマホサイズにしてもimg/sample@2x.jpgの方が表示されます。
何が原因かわかる方がいましたらコメントお願いします。
発生している問題・エラーメッセージ
スマホサイズ以下とそれ以外で画像を切り替えたいが、切り替わらない
該当のソースコード
html
1<meta name="viewport" content="width=device-width, initial-scale=1"> 2//略 3 4//変更前 5<img class="top-image" srcset="img/sample_sp@2x.jpg 375w, img/sample@2x.jpg 720w" src="img/sample@2x.jpg"/> 6 7//変更後 8<img class="top-image" srcset="img/sample_sp@2x.jpg 375w, img/sample@2x.jpg 1440w" sizes="(max-width: 375px) 280px, 1000px" src="img/sample@2x.jpg"/> 9
試したこと
キャッシュを削除してリロード
シークレットモードでの表示
環境
Chrome
回答2件
0
これかもしれません。
【Chromeのsrcsetで誤解していた。 | 開発 | 2018年3月6日 | モノグサにお灸】
https://monoxa.net/2018/03/chrome%E3%81%AEsrcset%E3%81%A7%E8%AA%A4%E8%A7%A3%E3%81%97%E3%81%A6%E3%81%84%E3%81%9F%E3%80%82/
なので、例えばPC画面サイズでは横長バナー画像に、モバイル画面サイズでは正方形バナー画像に切り替えて表示出来るよね、と思っていたのだけど、これがChromeでは切り替わらない。
Chromeだとうまくいかないじゃない
どうやらChromeのポリシーとしては、
だって、一番容量の大きい画像を読み込んだ後に、わざわざ別の画像読み込む必要無いじゃん
ということらしいです。
【img の srcset 指定時に選択される画像 | blog.jxck.io】
https://blog.jxck.io/entries/2020-08-15/selection-of-img-srcset.html
投稿2021/08/04 04:02
総合スコア69606
0
srcsetを幅指定（***w）で書く場合、sizesで「どの状況ではどの幅の画像を選ぶか」を定義する必要があります。
投稿2021/08/04 01:54
総合スコア146018
「スマホサイズにしても」とありますが、ビューポートは効く状態にしていますでしょうか？
パソコンのブラウザを幅だけ狭めた場合、挙動が異なることがありえます。
効く状態というのは、metaで記述ということですか？
今回の「スマホサイズにしても」というのは、chromeの検証の右上にあるスマホ画面に切り替えるボタンをクリックしたという意味になります。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/08/05 12:24