据我所知，srcsetandsizes属性更侧重于为设备的大小和分辨率应用适当缩放的图像。
似乎没有工具可以使用这些属性来根据屏幕尺寸选择替代图像，例如裁剪或定向不同的图像。
这是对情况的正确理解吗？这是否意味着我们将不得不等待该picture元素被广泛支持来完成这项任务？
问问题
269 次
2 回答
4
您是正确的，srcset并且sizes只是为“相同”图像提供不同的分辨率替代方案 - 无法保证将选择哪个资源。
如果您想提供裁剪或按比例不同的替代方案，以保证与您的响应断点相匹配，那么<picture>这就是您正在寻找的。
就支持而言，<picture>Chrome 和 Firefox 完全支持，MS Edge 即将支持，Safari 9 尚不支持。同时，您可以使用图片填充将支持添加到不支持的浏览器。
于 2015-09-30T13:53:51.810 回答
-1
就个人而言，我使用了 w 描述符并srcset根据可用空间的宽度显示各种图像。
它可能看起来相当粗糙，但它对我有用 - 我编辑图像，使其成为许多常见断点的“艺术指导” - 将其有效地转化为许多不同的图像。
然后，根据代理屏幕的大小，浏览器几乎总是会选择我之前确定的最合适的图像。
对于我的方法，我没有使用size,picture或任何其他属性。
像这样简单的代码似乎可以工作：
<img srcset="room-and-person.jpg 3200w, person-face-only.jpg 1600w" src="image.jpg" alt="an image" />
于 2016-02-13T12:03:31.737 回答