Chrome 52 似乎不支持 HTML5 图片元素？ srcset 不工作答案

【问题标题】：HTML5 Picture element does not seem to be supported by Chrome 52? Srcset not workingChrome 52 似乎不支持 HTML5 图片元素？ srcset 不工作
【发布时间】：2017-01-07 05:54:12
【问题描述】：

我刚刚创建了一个新网页，所以没有太多的标记可供查看。

我设置了这个：

<picture>
    <source media="(min-width: 1000px)"
            srcset="images/largeme.jpg">
    <source media="(min-width: 465px)"
            srcset="images/medme.jpg">
    <img src="images/smallme.jpg"alt="hero profile">
</picture>

无论窗口的宽度如何，它都默认为 medme.jpg 图片。我设置了这个：

<picture>
    <source media="(min-width: 1000px)"
            srcset="images/largeme.jpg">
    <source media="(min-width: 465px)"
            srcset="images/medme.jpg">
   <!-- <img src="images/smallme.jpg"alt="hero profile">-->
</picture>

注释掉 img 后备标签，它不显示任何内容。

我正在运行 Chrome 52，它应该支持图片元素。但它似乎表现得好像它不支持它或什么的。我在这里做错了什么？

【问题讨论】：

您确定正在提供图片吗？在开发工具的 Network 选项卡中检查网络请求

标签： html image responsive-design picturefill

【解决方案1】：

根据this source，<source> 媒体属性根本不受支持...

【讨论】：

w3schools 最近在当前规范上落后了。

【解决方案2】：

它应该在 chrome 中工作，也许您需要视口元标记来触发不同的来源？ <meta name="viewport" content="width=device-width, initial-scale=1"> Here is a simple picture-tag example 在 chrome 中工作。将其与您的网站进行比较以找出不同之处。

【讨论】：

我实际上是从该示例网站复制粘贴：/ idk 它是怎么回事。我最终让它工作了，但它仍然以一种意想不到的方式运行。我不知道为什么

【解决方案3】：

picture 元素内的img 元素不是可选的。 picture 包装器及其 source 元素用于更改 img，而不是替换它。

【讨论】：

正是我需要的。这完全让我明白了。我以为img 标签是为了兼容性回退，但它实际上用于渲染。
omg 我刚刚浪费了这么多时间，只是因为互联网上到处都写着（并强调）是用于后备的。虽然实际上它是中的一个强制性元素......谢谢@rspeed
但它不起作用。它总是在 img src 中渲染图像，忽略其他的。
@ChinmayGhule 确保img 是picture 元素的最后一个 子元素。
@rspeed 我确实这样做了，但还是没用。

【解决方案4】：

这听起来很傻，但是您是否尝试过恢复订单？出于某种原因，这样做使它对我有用。

所以，而不是：

<picture>
    <source media="(min-width: 1000px)"
            srcset="images/largeme.jpg">
    <source media="(min-width: 465px)"
            srcset="images/medme.jpg">
    <img src="images/smallme.jpg"alt="hero profile">
</picture>

试试这个：

<picture>
    <source media="(min-width: 465px)"
            srcset="images/medme.jpg">
    <source media="(min-width: 1000px)"
            srcset="images/largeme.jpg">
    <img src="images/smallme.jpg"alt="hero profile">
</picture>

【讨论】：