Нерабочий srcset

Я пытаюсь научиться использовать адаптивные изображения. Поэтому я сделал простую страницу, чтобы попытаться использовать srcset с размерами. Есть 4 изображения maldives-3220702_1920.jpg нормальное. Другие 3 имеют номер на них, чтобы я мог видеть, когда изображения меняются. Изображения не находятся в папке, это только для тренировки с адаптивными изображениями. Там размеры 1920/1280 для обычного мальдивы-3220702_1920.jpg px. Мальдивы1 - 1200/800 пикселей. Мальдивы2 - 800/533 пикселей. Мальдивы3 - 400/267 пикселей. Моя проблема в том, что при загрузке страницы изображения не меняются. И когда я смотрю на пути к файлам в инструментах разработчика браузера, все они показывают мальдивы1. Я не знаю почему? 0.0 В main.js есть полигон Picturefill.

<!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>
Источник

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>
Источник
Другие вопросы по тегам