响应式图像:Srcset&大小

时间:2016-07-26 19:30:48

标签: html image responsive-design responsive-images srcset

我正在当前项目中实现响应式图像,并使用以下示例引用this post on CSS-Tricks

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

我在自己的项目中使用了这种格式,只指定了宽度替换,有趣的是W3C Validator告诉我:

  

srcset属性具有任何带有a的图像候选字符串时   宽度描述符,'sizes'属性也必须存在

我意识到规范正在发展,这可能更像是一个验证者问题,但我似乎无法找到一个明确的答案,这是否确实是真的。根据我的阅读,按宽度指定源应足以帮助浏览器做出最佳选择。

在我的项目中,我有一个Pinterest风格的网格布局,三列图像通过断点调整为一个;我也想知道我的sizes标记是否正确:

<img src="img/tile-320.jpg"
     srcset="img/tile-480.jpg 480w, img/tile-720.jpg 720w"
     sizes="(min-width: 768px) 33.3vw, (min-width: 568px) 50vw, 100vw"
     alt="srcset test">

因此,我有三个图像大小,320px版本作为默认/后备,而在768px之后,网格有三列;在568px它有两个,否则可以假设列/图像填充视口宽度。

我的问题是:(1)在指定基于宽度的备用源时,浏览器实际需要sizes吗? (2)在上述实现中,我的标记使用sizes是否正确?

1 个答案:

答案 0 :(得分:1)

  

指定基于宽度的备用源时,浏览器实际需要大小吗?

如果未指定浏览器,则不必指定大小将采用默认大小=“100vw”

  

我的标记在上述实现中使用的大小是否正确?

对我来说它看起来不错,尺寸的主要用途是告诉浏览器在不同分辨率下图像的宽度应该是多少。

Click here了解更多信息。