Адаптивная разметка изображения с использованием javascript - PullRequest
Новая
       8

Адаптивная разметка изображения с использованием javascript

0 голосов
/ 19 апреля 2020

Я закончил учебник по ссылке в процессе обучения, и он показал мне, как сделать разметку адаптивного изображения, используя javascript, но я не смог сделать это для моей личной веб-страницы. Как изменить мою кодировку? Я хочу заменить мои изображения на меньшие, когда браузер станет меньше. 

const IMAGES = document.querySelectorAll("img");
const SIZES = {
showcase: "(max-width: 799px) 100vw, 372px",
};


for (let i = 0; i <IMAGES.length; i++) {
     let imgSrc = IMAGES[i].getAttribute("src");
     imgSrc = imgSrc.slice(0, -9)
     let srcset = makeSrcset(imgSrc);
     IMAGES[i].setAttribute("srcset", srcset);
     console.log(srcset);

     let type = IMAGES[i].getAttribute("data-type");
     let sizes = SIZES[type];
     IMAGES[i].setAttribute("sizes", sizes);
     console.log(type);
     // console.log(sizes);
}

function makeSrcset(imgSrc) {
     let markup = [];
     let width = 500;

     for (let i = 0; i<2; i++) {
          markup[i] = imgSrc + "-" + width + ".jpeg";
          width -= 300;
     }

     return markup.join();
}
...