html5 中的 <picture> 元素通过调整大小显示不同的图像答案

【问题标题】：The <picture> Element in html5 shows not different images by resizehtml5 中的 <picture> 元素通过调整大小显示不同的图像
【发布时间】：2019-10-22 18:25:22
【问题描述】：

我找到了这段代码： https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_picture

我在所有浏览器上都试过了，它运行正常。但是当我复制代码并调整浏览器大小时，只显示 img 标签。感谢您的帮助。

  <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>

    <picture>
       <source media="(min-width: 650px)" srcset="Blume 1.jpg">
       <source media="(min-width: 465px)" srcset="Blume 2.jpg">
       <img src="Blume 3.jpg" alt="Flowers" style="width:auto;">
    </picture>

    </body>
    </html>

【问题讨论】：

标签： html image responsive-design

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>The picture Element</h2>

<picture>
  <source media="(min-width: 650px)" srcset="https://www.abc.net.au/news/image/8281088-16x9-940x529.jpg">
  <source media="(min-width: 465px)" srcset="https://static-news.moneycontrol.com/static-mcnews/2018/12/Google-770x433.jpg">
  <img src="https://www.irishtimes.com/polopoly_fs/1.3722378.1544095168!/image/image.jpg_gen/derivatives/box_620_330/image.jpg" alt="Flowers" style="width:auto;">
</picture>

<p>Resize the browser to see different versions of the picture loading at different viewport sizes.
The browser looks for the first source element where the media query matches the user's current viewport width,
and fetches the image specified in the srcset attribute.</p>

<p>The img element is required as the last child tag of the picture declaration block.
The img element is used to provide backward compatibility for browsers that do not support the picture element, or if none of the source tags matched.
</p>

<p><strong>Note:</strong> The picture element is not supported in IE12 and earlier or Safari 9.0 and earlier.</p>

</body>
</html>

我已经尝试了相同的示例，并且对我来说效果很好。

【讨论】：

【解决方案2】：

你要正确使用图片源

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

<picture>
   <source media="(min-width: 650px)" srcset="https://www.w3schools.com/html/img_pink_flowers.jpg">
   <source media="(min-width: 465px)" srcset="https://www.w3schools.com/html/img_white_flower.jpg">
   <img src="https://www.w3schools.com/html/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

</body>
</html>

【讨论】：

非常感谢。使用您的 URLs/Sources 现在可以使用。但是该代码不适用于我本地计算机上的我自己的图像。我不知道，为什么。
@shimaamini 你能把你试过的本地图片源展示一下吗
图片与 html 文件位于同一文件夹中。我是这样写的：srcset="Blume 1.jpg" 用于图片标签，src="Blume 3.jpg" 用于 img 标签。
我还以为你在srcset url中犯了错误，尝试将图像源拖到srcset。file path may be something like this
非常感谢。我发现了错误。文件名中有空格。我改了名字。没有空间作品。