Web サイトの各投稿には、ヘッダー画像があります。この画像の幅100vwと高さは300pxです。srcsetタグの属性imgまたは本格的な要素のいずれかを介して、この画像の複数のバージョンを配信したいと思いますpicture（現時点ではどちらかがわからないため、この質問です）。
これを行うには、srcset属性を使用するとかなり簡単です。
<img srcset="lg.jpg 1200w, md.jpg 992w, sm.jpg 768w, xs.jpg 320w" sizes="100vw" src="xs.jpg">
さまざまなデバイスのピクセル比を考慮したい場合に問題が発生します。まず、上記にリストされているすべてのイメージの2xとバージョンがあるとします。3xsrcset
幅の広いビューポート (iPhone 5 など)を備えた2x電話を持っているとしましょう。320pxブラウザをロードしたいと思いますxs_2x.jpg。同様に1x、ワイドスクリーン モニターを備えたデスクトップがあるとします。ブラウザをロードしたいと思いますlg.jpg。
しかし今、私がより大きな携帯電話を持っているとしましょ3xう414px。この場合、ブラウザをロードしたいと思いますsm_3x.jpg。ただし、(1536 ピクセル) の幅は(2304 ピクセル)の幅よりも電話の幅 (1242 ピクセル) に近いため、私のブラウザーはsm_2x.jpg代わりに読み込まれる可能性があります。これにより、デバイス上で画像の高さが低くなり、Web サイトの要件が満たされなくなります。sm_2x.jpgsm_3x.jpg300px
動的な幅、静的な高さ、DPR を意識したレスポンシブ イメージを実装するにはどうすればよいですか?
