我試圖使用srcset來執行簡單的任務，當我的頁面的小屏幕尺寸觸發640像素寬（我正在使用Foundation 5）時，爲640x256px圖像交換1000x400px圖像。在我指定了alt圖片的嘗試中，瀏覽器似乎默認使用了此選項，並忽略了其他所有內容。順便說一句，我使用的alt尺寸是999x399px，這樣我就可以看到是否顯示了該圖片，而不是我的主要1000x400px圖片。爲什麼我的任何srcset屬性都不起作用？不同瀏覽器的結果
據我所知，我所做的正是關於這個主題的各種教程和文章所指導的內容，但我無法完成它的工作。此外，根據我是在Firefox還是Chrome中預覽結果，我得到的行爲不同。我的Firefox版本是'34 .0.5'，我的Chrome版本是'39 .0.2171.95 m'。
下面是我的HTML的示例，其中描述了結果。我看不到我做錯了什麼。絕對沒有什麼似乎工作。
這一個顯示在Firefox在所有瀏覽器窗口大小的1000x400px圖像，並且沒有顯示出除了在Chrome缺少圖像圖標什麼：
<div><img src="http://placehold.it/1000x400/444444/ffffff" srcset="http://placehold.it/640x256/444444/ffffff 640w, alt=""></div>
這一個顯示在999x399px替代圖像適用於所有瀏覽器尺寸的Firefox，並且在Chrome瀏覽器中顯示所有瀏覽器尺寸的640x256px小圖片。另外，在瀏覽器的640x256圖像被限制在該尺寸和較大的瀏覽器窗口在下面其它實施例中不擴大，不像：
<div>
<picture>
<source srcset="http://placehold.it/640x256/444444/ffffff, http://placehold.it/1000x400/444444/ffffff">
<source media="(min-width: 641px)" srcset="http://placehold.it/1000x400/444444/ffffff">
<img src="http://placehold.it/999x399/444444/ffffff" alt="">
</picture>
</div>
這一個在這兩個顯示在所有瀏覽器窗口大小的999x399px替代圖像Firefox和Chrome：
<div>
<source srcset="http://placehold.it/640x256/444444/ffffff, http://placehold.it/1000x400/444444/ffffff">
<source media="(min-width: 641px)" srcset="http://placehold.it/1000x400/444444/ffffff">
<img src="http://placehold.it/999x399/444444/ffffff" alt="">
</div>
這下面的兩個例子顯示在對面Firefox瀏覽器的窗口大小的1000x400px圖像，但顯示在Chrome在所有瀏覽器窗口大小的640x256px圖像。此外，此時的640x256px圖像被向上縮放以適合所有瀏覽器窗口大小，不像在第二實施例以上：
<div><picture><img alt="" src="http://placehold.it/1000x400/444444/ffffff" srcset="http://placehold.it/640x256/444444/ffffff 640w"></picture></div>
<div><img alt="" src="http://placehold.it/1000x400/444444/ffffff" srcset="http://placehold.it/640x256/444444/ffffff 640w"></div>
除了上述實例我曾嘗試的div，圖片標籤，沒有的div的每個組合並沒有圖片標籤，並沒有任何工作。我一整天都在這個該死的東西上！任何人都可以看到我在這裏做錯了嗎？各種瀏覽器類型的不一致結果增加了混淆。
如果您可以提供幫助，請提前致謝。
編輯：我找到了一個適用於Chrome的示例，但不適用於Firefox。我指的是該網頁是這一個：http://www.web3.lu/picture-element-and-srcset-attribute/
從該頁面的例子是這樣的：
<img src="brain.jpg" sizes="75vw"
srcset="brain-small.jpg 320w,
brain-medium.jpg 640w,
brain-large.jpg 1024w,
brain-xlarge.jpg 2000w"
alt="Brain Structure">
對此我適應了這個：
<img src="http://placehold.it/999x399/444444/ffffff"
sizes="100vw"
srcset="http://placehold.it/640x256/444444/ffffff 640w,
http://placehold.it/1000x400/444444/ffffff 1000w"
alt="">
我可以看到，這個例子是略有不同，因爲它包含'尺寸'屬性，它包含圖像的最大寬度，但我不知道爲什麼沒有其他工作，儘管顯然是如何使用srcset屬性的示例。此外，我仍然不知道爲什麼這不適用於Firefox！在Firefox中，它僅以標準（非縮放）尺寸顯示640x256px的小圖片。
進一步編輯：我已自制定了，我可以適應上述工作實施例中是在Firefox上可接受的，但是，不可操作的，除了是在鉻完全功能。
我上面的最終代碼的問題是，在Firefox（其中srcset圖像交換不工作），我被固定大小的640x256px圖像顯示卡住，所以它顯示太小並在中等屏幕上向上片面。這顯然是默認的小圖像選項，而不是src圖像或大圖像。
我如何解決這個問題很簡單（對更有經驗的用戶來說可能很明顯）：我只是改變了srcset圖像的順序，使得1000x400px圖像是第一個。像這樣：
<img src="http://placehold.it/999x399/444444/ffffff"
sizes="100vw"
srcset="http://placehold.it/1000x400/444444/ffffff 1000w,
http://placehold.it/640x256/444444/ffffff 640w"
alt="">
現在我的1000x400px圖像顯示在整個。儘管可能這不符合'移動第一'原則，但我無法找到一種方法來將640x256px圖像放大以適應大中型屏幕。此外，放大縮小該圖像並因此影響其在大屏幕上的質量對我來說是一個比被迫將1000x400px圖像傳送到小屏幕更大的懲罰。
我仍在尋找一種方法來使上面的最終例子也可以在Firefox中工作，但無論如何，我希望上面的一些幫助其他初學者，如果只是提供什麼不起作用的例子。一個解決技術問題
最後編輯：
感謝亞歷山大·法卡斯誰貼在下面，我現在已經找到了解決辦法。在此鏈接在這裏：
https://github.com/aFarkas/respimage
我滾動到名爲「srcset與寬度w描述符和大小屬性」的部分，然後我嘗試了Codepen例子。
這在Firefox中工作得很好。它執行圖像交換，但我必須在每個窗口大小（除了最小圖像之外）刷新瀏覽器，否則它不會每次顯示交換圖像的新大小。
謝謝！
在FF中，您是否啓用了'about：config'中的srcset設置？它默認設置爲false。 – j08691
http://caniuse.com/#search=srcset – isherwood
感謝您的回覆。我將'dom.image.srcset.enabled'更改爲true，'dom.disable_image_src_set'我將它設置爲false，因爲我認爲我不應該啓用該禁用。 這樣做的結果是改變Firefox的行爲，以便我現在可以得到小的640x256px圖像，以固定（非縮放）大小顯示示例1,4和5.示例2和3保持不變。這些都沒有實際的工作，因爲我仍然沒有得到所需的圖像交換當小屏幕尺寸觸發。 – FGS