Question

我需要存储图像的宽度和高度（每种尺寸）以便稍后通过JS解析它们。我使用定义w和h描述符的语法：

<img srcset="small.jpg 600w 400h, 
          medium.jpg 1024w 500h,
          large.jpg 1600w 900h"
  alt="">

w和h描述符的语法是否有效？我在几个浏览器中对它进行了测试，看起来很有效，但我不确定未来它是多么友好。或者我应该在其他地方存储高度，例如：

<img srcset="small.jpg 600w, 
          medium.jpg 1024w,
          large.jpg 1600w"
  data-my-sizes="600x400 1024x500 1600x900"
  alt="">

Answer 1

当前没有srcset实施考虑到高度，但是长期计划的一部分 - 而且看起来，那些h描述符最终可能会影响显示哪个来源。如果您正在编写的JS行为旨在匹配本机实现如何处理h描述符，那么我会走这条路线但要谨慎行事 - 没有办法说明某些规范/实现可能会在某一天发挥作用。如果没有，我肯定会坚持使用data-属性。

有一点：你需要一个sizes。如果省略该属性，行为仍然默认为100vw，但验证时需要它。

Answer 2

此处<picture>规范的合着者。

技术上安全，只是因为我们明确允许h描述符用于将来的compat。只要您正确使用它（对于实际高度，与w相同），当我们最终启用对基于高度的选择的支持时，您应该是安全的。

但你不能做任何其他事情;任何无法识别的描述符（x，w或h之外的任何内容）都会导致候选人被抛弃。

Answer 3

首先，h规范在规范中被提及为＆＃34; future-compat-h＆＃34;描述。它被添加到解析规则中，这样只有h描述符被开发人员指定和使用时，只支持宽度描述符的浏览器才会失败。

这意味着它可以保存使用，但目前不支持任何浏览器（即使指定了如何编写高度约束的respimages的sizes属性的确切方法）。但请注意，picturefill 2.x无法正确解析这样的srcset字符串，您应该使用以下任一字符串：

在srcset中定义多个描述符是否安全？

3 个答案: