IE10および11のHTML5 <picture> srcsetフォールバック

debugcn 投稿 Dev

ServerSideSkittles

フッターをさまざまなデバイスに応答させたいので、cloudinaryのジェネレーターを使用しました。これがHTML5です

<picture>
<img
sizes="(max-width: 1920px) 100vw, 1920px"
srcset="
footer_rainbow_fjrr5j_c_scale,w_190.png 190w,
footer_rainbow_fjrr5j_c_scale,w_780.png 780w,
footer_rainbow_fjrr5j_c_scale,w_1190.png 1190w,
footer_rainbow_fjrr5j_c_scale,w_1920.png 1920w"
src="footer_rainbow_fjrr5j_c_scale,w_1920.png"
alt="">
</picture>

ただし、caniuse.comによると、IE10または11はサポートされていません。

最高のフォールバックは何ですか？これまで考えられるのは、異なるブレークポイントを持つcssを使用したメディアクエリを使用することだけです。もっと良い方法はありますか？私はcssカバー、幅も試しました。100％含まれていますが、どちらも完璧ではありません。

emailstudioadam

すでにフォールバックがあります。セットアップ方法は、IE 10および11で機能するはずです...どちらもサイズとsrcset属性を無視しますが、デフォルトではsrc属性を使用します。

画像を使用して同じ構造をテストしたところ、IE10と11の両方でデフォルトのフォールバック画像が正常に表示されました。

<img
sizes="(max-width: 1920px) 100vw, 1920px"
srcset="
http://www.studioadam.com/codepen/waterfall-wide-1100.jpg  1100w,
         http://www.studioadam.com/codepen/waterfall-wide-550.jpg  550w"
src="http://www.studioadam.com/codepen/waterfall-wide-1100.jpg"
alt="">

または（または直接画像をアートしたい場合）、画像要素内でソース要素を使用することもできます：http：//codepen.io/studioadam/pen/pNVNNj？editors = 1100

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]