Srcset不工作Firefox

Question

我想在瀏覽器達到特定的屏幕大小時使用srcset屬性來交換圖像。當屏幕尺寸高於768像素寬時，我需要顯示桌面圖像。

我已經能夠使用下面的代碼在除Firefox以外的大多數瀏覽器中完成此操作。我對'srcset'遊戲非常陌生，所以我不確定在我的結尾是否有語法錯誤。牢記視網膜設備，有沒有人有我在這裏失蹤的想法？對於srcset的瀏覽器支持似乎足夠了，所以我不確定可能會導致這種情況。

<img class="desktop-hero" alt="" src="../img/hero_desktop.jpg" srcset="../img/hero_mobile.jpg 768w, ../img/hero_desktop.jpg 1x" /> 

Answer 1

編輯添加：喲，你從哪個教程得到該標記？我剛剛意識到，它看起來像是試圖使用舊的srcset語法，這是從來沒有人實現過的，這是一個壞主意。如果您可以指出您的位置，我們可以嘗試更新該教程，並防止更多人犯同樣的錯誤。

---

首先，混合w和x是無效的。這不應該是你的問題的直接原因，但它會導致完全不可預知的行爲。 （w描述符根據它的值和sizes屬性的值被轉換爲等價的x描述符。）

其次，w描述符不會像你要求的那樣做任何事情。它與sizes屬性一起用於指定圖像的密度間接，此時圖像的最終大小不是單個硬編碼的px值。它與屏幕的大小無關，也不隱藏任何東西。這是圖片的寬度，圖片像素的寬度。現在

，假設hero_desktop和hero_mobile實際上是不同的圖像（不同尺寸，不同作物，不同的內容，等等），而不僅僅是同一圖像的不同分辨率版本，你真正想要做的是使用<picture>：

當屏幕是> = 768px，並且默認爲移動圖像否則

html <picture> <source media="(min-width: 768px)" srcset="../img/hero_desktop.jpg"> <img src="../img/hero_mobile.jpg"> </picture>

這將選擇在桌面圖像。

---

在另一方面，如果臺式機和移動圖像是相同的圖像，只是在不同的分辨率，那麼你就需要使用<img srcset>，但無論是x或w對他們倆的堅持。如果圖像是靜態大小，或者允許其爲「原生」大小，則使用x。如果您的佈局將圖像設置爲特定尺寸，請使用w（和sizes）。那麼不要擔心圖像切換的時間。如果你聲明瞭正確的東西，瀏覽器會爲你做出合理的選擇。