HTML5 srcset、大小和艺术指导

Question

据我所知，srcset 和 sizes 属性更侧重于为设备的尺寸和分辨率应用适当缩放的图像。

似乎没有工具可以使用这些属性来根据屏幕尺寸选择替代图像，例如裁剪或方向不同的图像。

这样理解正确吗？这是否意味着我们必须等待 picture 元素得到广泛支持才能完成这项任务？

Answer 1

你是对的 srcset和 sizes只是为“相同”图像提供不同分辨率的替代方案 - 不保证将选择哪个资源。

如果您想提供保证匹配您的响应断点的裁剪或比例不同的替代方案，那么 <picture>正是您要找的。

就支持而言，<picture> Chrome 和 Firefox 完全支持，MS Edge 即将支持，Safari 9 尚不支持。同时，您可以使用 picturefill将该支持添加到不支持的浏览器。