13

我刚刚开始了一个新网页，所以没有太多的标记。

我设置了这个：

<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。但它似乎表现得好像它不支持它或什么的。我在这里做错了什么？

4

4 回答 4

26

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

于 2018-01-15T08:17:54.947 回答
3

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

于 2016-08-31T07:54:23.743 回答
2

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

所以，而不是：

<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>
于 2020-09-19T13:32:35.063 回答
0

根据这个来源，<source>媒体属性根本不被支持......

于 2016-08-30T20:03:07.077 回答