HTML5 srcset，尺寸和藝術指導

Question

據我所知，該srcset和sizes屬性的更多集中在施加適當縮放的圖像的設備的大小和分辨率。

似乎沒有辦法使用這些屬性來根據屏幕尺寸選擇另一幅圖像，例如裁剪或定向不同的圖像。

這是對情況的正確理解嗎？ 這是否意味着我們將不得不等待picture元素被廣泛支持以完成此任務？

Answer 1

你是正確的srcset和sizes都只有在那里提供不同的解決方案，以“相同”的形象-有沒有擔保其資源將有所回升。

如果要提供裁剪或比例不同的替代方案以保證與您的響應斷點相匹配，那么<picture>是您所需要的。

就支持而言， <picture>在Chrome和Firefox中完全受支持，很快將在MS Edge中得到支持，而在Safari 9中則不再受支持。與此同時，您可以使用picturefill將支持添加到不支持瀏覽器。

Answer 2

就個人而言，我根據可用空間的寬度使用了w描述符和srcset來顯示各種圖像。

它看起來似乎很粗糙，但是對我有用：我編輯圖像，使它在許多常見的斷點處變為“藝術指導”-有效地將其轉變為許多不同的圖像。

然后，根據座席屏幕的大小，瀏覽器幾乎總是會選擇我之前確定最適合的圖像。

對於我的方法，我沒有使用size ， picture或任何其他屬性。

看起來像這樣簡單的代碼可以工作：

<img srcset="room-and-person.jpg 3200w, person-face-only.jpg 1600w" src="image.jpg" alt="an image" />