HTML圖像元素沒有履行小媒體查詢

我有這樣的事：HTML圖像元素沒有履行小媒體查詢

<picture> 
    <source media="(min-width:1200)" srcset="big.jpg"> 
    <source media="(min-width:840)" srcset="small.jpg"> 
    <img srcset="big.jpg" alt="Test" /> 
</picture>

我還使用picturefill。

我的問題是firefox和chrome（我目前測試的2個）都只會加載big.jpg，即使在小屏幕上也是如此。還檢查控制檯的網絡跟蹤。

我的CSS設置IMG基本液：

img{ 
    display: block; 
    max-width: 100%; 
    height:auto; 
}

那麼，什麼是錯在我的代碼？

來源

2017-07-03 Stratboy

我會使用''而不是'srcset'和'sizes'。另外，你是不是錯過了你的'min-width'值的單位聲明？ –

有趣的是，即使[picturefill的網站]（http://scottjehl.github.io/picturefill/），當我使我的屏幕非常小時，請求所有三個圖像（他們使用三個而不是兩個） –

@I haz kode：''srcset/sizes並不適用於藝術導向的圖片afaik，因爲您不會100％確定瀏覽器會選擇什麼，因爲它們只被視爲建議。無論如何，你說得對，這裏的問題是缺少單位聲明！ :) – Stratboy

至於I haz kode的評論，答案是：我的代碼在媒體查詢中缺少單位聲明。

至於完整性，我也在這裏寫一個更好的代碼爲我的用例：有一個默認圖像的小屏幕和不同的從840px起。

<picture> 
    <source media="(min-width:840px)" srcset="big.jpg"> 
    <img srcset="small.jpg" alt="Foradori"> 
</picture>

這將正常工作，並且只下載當前斷點的正確圖像。還記得我們需要picturefill來確保交叉瀏覽器的支持。

來源

2017-07-04 07:17:50 Stratboy

HTML圖像元素沒有履行小媒體查詢

回答

相關問題