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"> Here is a simple picture-tag example适用于Chrome。将其与您的网站进行比较，找出不同之处。

Answer 3

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

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

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

4 个答案: