Question

I am trying to learn how to use responsive images. So I made a simple page to try to practice using srcset with sizes. There are 4 images maldives-3220702_1920.jpg is the normal one. The other 3 have a number on them so I can see when the images change. The images are not in a folder this is only for practicing with responsive images. There sizes are 1920/1280 for the normal one maldives-3220702_1920.jpg px. maldives1 is 1200/800px. maldives2 is 800/533px. maldives3 is 400/267px. My problem is when the page loads the images are not changing. And when I look at the file paths in the browser developer tools they all show maldives1. I do not know why? 0.0 The main.js has the 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>

Non working srcset

1 个答案: