How to set image width and height using javascript?

Question

I'm trying to adjust the following javascript code (found here ) so the background images will fit the screen. Currently they're streched too far down. I believe the problem is in the mobileImages.style.width, mobileImages.style.height desktopImages.width and desktopImages.height. Could somebody point out my mistake(s)?

function changeImg(imgNumber)   {
        var mobileImages =["images/1mini.png","images/2mini.png","images/3mini.png"]; 
        mobileImages.style.width = '100vw';
        mobileImages.style.height = 'auto';
            var desktopImages = ["images/desktop/1.jpg", "images/desktop/2.jpg", "images/desktop/3.jpg", "images/desktop/4.jpg", "images/desktop/5.jpg", "images/desktop/6.jpg", "images/desktop/7.jpg", "images/desktop/8.jpg", "images/desktop/9.jpg", "images/desktop/10.jpg", "images/desktop/11.jpg", "images/desktop/12.jpg", "images/desktop/13.jpg", "images/desktop/14.jpg", "images/desktop/15.jpg", "images/desktop/16.jpg", "images/desktop/17.jpg", "images/desktop/18.jpg", "images/desktop/19.jpg", "images/desktop/20.jpg", "images/desktop/21.jpg", "images/desktop/22.jpg", "images/desktop/23.jpg", "images/desktop/24.jpg", "images/desktop/25.jpg"];
        desktopImages.width = '100vw';
        desktopImages.height = 'auto';
            var imgShown = document.body.style.backgroundImage;

            //this code will return true when device is mobile
            if (navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)) { 
                var newImgNumber =Math.floor(Math.random()*mobileImages.length);
                document.body.style.backgroundImage = 
                                  'url('+mobileImages[newImgNumber]+')';  
            }else{
               var newImgNumber =Math.floor(Math.random()*desktopImages.length);
               document.body.style.backgroundImage = 
                                  'url('+desktopImages[newImgNumber]+')';
            } 
        }


        window.onload=changeImg;

body, html {
    margin: auto;
    overflow: hidden;
    background-size: cover;
}

Gavri Ramlik · Answer

u trying to apply width and height to array of images, u can set width and height only to dom nodes

Max Pattern · Answer

Take look in the example below. It will use inline style. But you can assign some styles in your css and bind them to the image by using javascript (classList -> https://developer.mozilla.org/en-US/docs/Web/API/Element/classList?retiredLocale=de).

const img = document.querySelector("img");
img.style.width = "200px"
img.style.height = "200px"
console.log(img)

001 · Answer

You're styling the array, which does nothing!

Example 1

We simply get the img element, then we style it as you tried.

let img = document.querySelector('.img');
img.style.width = '200px';

Example 2

In this example, we append the imgs to the DOM first then we style it! and that's the point!

// Images src
let imgs = ['https://www.w3schools.com/html/img_chania.jpg', 
            'https://www.w3schools.com/html/img_girl.jpg'];

// Array to hold HTML output (images as elements)
let holder = [];

// Create elements based on src above and push it to the array (holder) 
imgs.forEach(img => {
    let el = ``;
    holder.push(el);
});

// Print the output of the holder to the DOM (HTML)
document.getElementById('wrapper').innerHTML = holder.join('');

// Get the images and set it's width
let images = document.querySelectorAll('.imgs');
images.forEach(img => {
    img.style.width = '200px';
});

Example 3 (based on your code)

First you didn't choose the index when you called the function.
Remember, you have to style the background properties and NOT width and height! since it's not an img! It's a background-image!
If the index is randomly picked, then no need for the parameter, get a random number and pass it as an index.

Background Properties:

background-image
background-position
background-size
background-repeat
background-origin
background-attachment

If it's an img then make sure it's in the DOM before you can style it.

MDN - background property

function changeImg(imgNumber)   {
  var desktopImages = [
      "https://www.w3schools.com/html/pic_trulli.jpg",
      "https://www.w3schools.com/html/img_girl.jpg"];
      
  document.body.style.backgroundImage = 'url('+ desktopImages[imgNumber] +')';
}


window.addEventListener("load", () => {
  changeImg(1)
});

body, html {
    margin: auto;
    overflow: hidden;
    background-size: cover;
}


  
    
    some text

How to set image width and height using javascript?

3 Answers

Example 1

Example 2

Example 3 (based on your code)