HTML5 <picture> srcset回退IE 10和11

Question

我真的想保持我的頁腳響應不同的設備，所以我用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，它不支持IE 10或11

什麼是最好的後退？我目前所能想到的是使用帶有不同斷點的css的媒體查詢。有沒有更好的辦法？我也嘗試過css cover，width; 100％幷包含，但都不是完美的。

Answer 1

您已經有一個回退。你有它的方式設置它應該在IE 10和11中工作...都將忽略大小和srcset屬性，但默認使用src屬性。

我測試相同的結構使用我的圖片，並提出了關於這兩個IE 10和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