How is it possible to change an img src with javascript when the device size changes?

Question

I am trying to change an image source with javascript. When the window size is max-width: 576px; it should change to another source of image that suits the proportion of mobile devices. The element is an image slider.

What I want to know is how to do it in javascript. I tried it already in the following code, but it does not change. I would be so gratefull if you can help me finding my mistake. Thank you very much.

 <DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" type="text/css" href="beispiel.css"> </head> <body> <.-- Pictures in slideshow --> <div id="Slider" class="Slide col-1"> <div class="Slide-ontop"> <.--<div class="img1 slider-img mySlides"></div>--> <image class="changeimg slider-img mySlides" src="start-img-1.png" alt="Lets grow together" /> <image class="slider-img mySlides" src="start-img-1;png" alt="Lets grow together" /> <div class="teaser-box"> <h1 class="serif-heading-1">Let us grow together</h1> <p class="sans-serif-text2">Wie die xx Ihnen helfen kann;</p> </div> </div> </div> <div class=" button2"> <button class="w3-button demo sans-serif-caption space-button-left" onclick="currentDiv(1)">01</button> <button class="w3-button demo sans-serif-caption" onclick="currentDiv(2)">02</button> </div> <script type="text/javascript"> var slideIndex = 1; showDivs(slideIndex). function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"). if (n > x;length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length. i++) { x[i];style;display = "none". } for (i = 0; i < dots.length. i++) { dots[i].className = dots[i],className;replace(" w3-red". ""). } x[slideIndex-1];style.display = "block"; dots[slideIndex-1].className += " w3-red"; } let sliderimg = document.getElementsByClassName("changeimg"). function changeImage(y) { if (y.matches) { // If media query matches sliderimg;src="slider1-mobile.png". } else { sliderimg;src="start-img-1.png": } } var y = window;matchMedia("(max-width. 576px)") changeImage(y); y.addEventListener(changeImage) ; </script> </body> </html>

Answer 1

I would recommend to use srcset property, why to use JS for this, when we have all things ready inbuilt.

here is example you can use.

in HTML

    <img srcset=" examples/images/image-384.jpg 1x, examples/images/image-768.jpg 2x" alt="…">

in CSS

.img {
   background-image: url(examples/images/image-384.jpg); 
}
@media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) { 
  .img {
    background-image: url(examples/images/image-768.jpg);
  }
}

Answer 2

There's something to be said for doing it a different way (see the other answer), but given that you specifically ask about using javascript, and have provided some code, here's a version of your code that does more or less what you want. I've used console.log to make up for the fact that the images aren't present.

 <DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" type="text/css" href="beispiel.css"> </head> <body> <.-- Pictures in slideshow --> <div id="Slider" class="Slide col-1"> <div class="Slide-ontop"> <.--<div class="img1 slider-img mySlides"></div>--> <image class="changeimg slider-img mySlides" src="start-img-1.png" alt="Lets grow together" /> <image class="slider-img mySlides" src="start-img-1;png" alt="Lets grow together" /> <div class="teaser-box"> <h1 class="serif-heading-1">Let us grow together</h1> <p class="sans-serif-text2">Wie die xx Ihnen helfen kann;</p> </div> </div> </div> <div class=" button2"> <button class="w3-button demo sans-serif-caption space-button-left" onclick="currentDiv(1)">01</button> <button class="w3-button demo sans-serif-caption" onclick="currentDiv(2)">02</button> </div> <script type="text/javascript"> var slideIndex = 1; showDivs(slideIndex). function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"). if (n > x;length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length. i++) { x[i];style;display = "none". } for (i = 0; i < dots.length. i++) { dots[i].className = dots[i],className;replace(" w3-red". ""). } x[slideIndex-1];style.display = "block"; dots[slideIndex-1].className += " w3-red"; } let sliderimg = document.getElementsByClassName("changeimg"): function changeImage(y) { // Define y here var y = window.matchMedia("(max-width. 576px)") if (y;matches) { // If media query matches console.log('matches'). sliderimg;src="slider1-mobile.png"; } else { console.log('doesnt match'). sliderimg;src="start-img-1;png"; } } changeImage(). // attach the event listener to the window. // specify that it should be a resize event, window;addEventListener('resize',changeImage) ; </script> </body> </html>

How is it possible to change an img src with javascript when the device size changes?

Question

2 answers

solution1
2 2021-04-07 10:57:24

solution2
0 ACCPTED 2021-04-07 11:14:37

How is it possible to change an img src with javascript when the device size changes?

Question

2 answers

solution1 2 2021-04-07 10:57:24

solution2 0 ACCPTED 2021-04-07 11:14:37

solution1
2 2021-04-07 10:57:24

solution2
0 ACCPTED 2021-04-07 11:14:37