非工作 srcset

Question

我正在尝试学习如何使用响应式图片。所以我做了一个简单的页面来尝试练习使用 srcset with sizes。有4张图片maldives-3220702_1920.jpg是正常的一张。其他 3 个上面有一个数字，所以我可以看到图像何时发生变化。图片不在文件夹中，这仅用于练习响应式图片。正常的马尔代夫尺寸为 1920/1280-3220702_1920.jpg 像素。 maldives1 是 1200/800px。 maldives2 是 800/533px。 maldives3 是 400/267px。我的问题是当页面加载图像时没有改变。当我在浏览器开发者工具中查看文件路径时他们都显示maldives1。我不知道为什么？ 0.0 main.js 有 Picturefill polyfill。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
    document.createElement( "picture" );
    </script>
    <script src="main.js" async></script>        
</head>
<body>
    <section id="imgHandler" style="max-width: 90%; margin: 3em auto; background-color:grey;">
        <img src="maldives-3220702_1920.jpg" alt="tree beach"
        srcset="maldives1.jpg 1200w, maldives2.jpg 800w, maldives3.jpg 400w"
    sizes="(min-width: 500px) 400px 100vw
        (min-width: 900px) 800px 80vw
        (min-width: 1300px) 1200px 70vw">
    </section>
</body>
</html>

Answer 1

我想你想要这样的东西来代替你的 IMG 元素。

<picture>
  <source media="(max-width: 500px)" srcset="maldives1.jpg">
  <source media="(max-width: 900px)" srcset="maldives2.jpg">
  <source media="(max-width: 1300px)" srcset="maldives3.jpg">
  <img src="maldives-3220702_1920.jpg" alt="tree beach">
</picture>

非工作 srcset

Non working srcset

html

image

srcset