Is there a way to dynamically update an image source using JavaScript based on the device size?

Question

Is there a way to dynamically update an image source using JavaScript based on the device size?

I am attempting to switch the image source using JavaScript. Specifically, when the window size is max-width: 576px;, I want it to change to a different image source that fits the aspect ratio of mobile devices. This element is part of an image slider.

I need help figuring out how to accomplish this in JavaScript. I have already tried the following code, but it's not working as expected. Any assistance in identifying my mistake would be greatly appreciated. Thank you.

<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">
            <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")[0];

            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.addListener(changeImage);
    </script>

</body>
</html>

javascript html jquery css media-queries

Answer 1

Answer №1

Instead of using JavaScript, I would recommend utilizing the srcset property which comes built-in and eliminates the need for additional scripting.

Here is an example:

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

Instead of using JavaScript, I would recommend utilizing the srcset property which comes built-in and eliminates the need for additional scripting.

Here is an example:

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 3

Answer №2

While there might be merit in exploring alternative approaches (as mentioned in another response), since you're specifically interested in utilizing JavaScript and have shared some code snippets, here's an adapted version based on your requirements. I've included the use of console.log to simulate image output absence.

<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>

<!-- Slideshow with Images -->

    <div id="Slider" class="Slide col-1">

        <div class="Slide-ontop">
            <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">How xx can assist you.</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) {
                // Set y condition
                var y = window.matchMedia("(max-width: 576px)")
                if (y.matches) { // If media query verifies
                    console.log('matches');
                    sliderimg.src="slider1-mobile.png";
                } else {
                    console.log('doesnt match');
                    sliderimg.src="start-img-1.png";
                }
            }
            
            changeImage();

            // Link event listener to the window for resizing purposes.

            window.addEventListener('resize', changeImage) ;
    </script>

</body>
</html>

Answer 4

While there might be merit in exploring alternative approaches (as mentioned in another response), since you're specifically interested in utilizing JavaScript and have shared some code snippets, here's an adapted version based on your requirements. I've included the use of console.log to simulate image output absence.

<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>

<!-- Slideshow with Images -->

    <div id="Slider" class="Slide col-1">

        <div class="Slide-ontop">
            <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">How xx can assist you.</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) {
                // Set y condition
                var y = window.matchMedia("(max-width: 576px)")
                if (y.matches) { // If media query verifies
                    console.log('matches');
                    sliderimg.src="slider1-mobile.png";
                } else {
                    console.log('doesnt match');
                    sliderimg.src="start-img-1.png";
                }
            }
            
            changeImage();

            // Link event listener to the window for resizing purposes.

            window.addEventListener('resize', changeImage) ;
    </script>

</body>
</html>

Is there a way to dynamically update an image source using JavaScript based on the device size?

Answer №1

Answer №2

Similar questions

Vue js is throwing an error because it is unable to find the "buscador" property or method that is being referenced in the render function

Tips for adjusting the horizontal position of a grid item within a map() loop

Leveraging node modules in the browser using browserify - Error: fileType is not recognized

What is the process of setting up a subelement in a Vue array?

Are there any plugins available that can create a Ken Burns effect using JQuery?

Tips for choosing classes with identical names without resorting to incremental IDs

pressing a button unrelated to the 'close' button still triggers the close event

Transform a JavaScript object into a different structure

Creating dynamic SQL queries for bulk inserting data into Postgres using Vercel

Issue with firing Facebook pixel after router.push() in Next.js

Utilizing JavaScript to modify the language on a website

What is the best way to store the input names and values from a webpage into an object using javascript?

Concealing the nearest object

Having difficulty implementing dynamic contentEditable for inline editing in Angular 2+

What is the solution to the TypeScript error stating that there is no index signature with a parameter of type 'string' on the 'Object' type?

Simulating service calls in Jest Tests for StencilJs

What's the best way to remove the dead zone on a button with a relative position in HTML and CSS?

Using Mocha with the --watch flag enabled causes issues with ES6 modules and results in error messages

Necessary elements for communicating with an HTML form on the web