Chrome 52似乎不支持HTML5图片元素？Srcset不工作

Question

我刚刚开始一个新的网页,所以没有太多的标记要经过.

我把它放下:

<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,它应支持图片元素.但它似乎表现得好像它不支持它或其他东西.我在这做错了什么？

Answer 1

该img内部元素picture元素是不可选的.该picture包装和它的source元素在那里改变的img,而不是取代它.

Answer 2

它应该在 Chrome 中工作，也许您需要视口元标记来触发不同的源？<meta name="viewport" content="width=device-width, initial-scale=1"> 这是一个在 Chrome 中工作的简单图片标签示例。将其与您的网站进行比较，找出不同之处。

Answer 3

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

所以，而不是：

<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>

Answer 4

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