How to give different sizes to images inside object?

Hello I would like to set independent sizes to the images inside the object like Bulbasaur’s width 100px and picachu’s width 50px, I have been trying to figure out how to do it without success, thanks
html

<br>
<img id="image" />
<br>
<br>
<select id="pokemonList">
      <option value="Please Select A Pokemon">Please Select A Pokemon:</option>
      <option value="Bulbasaur">Bulbasaur</option>
  <option value="Picachu">Picachu</option>
</select>

css

#image {
    width: 300px;
    height: 200px;
}

js

var images = {
    Bulbasaur:
        "https://upload.wikimedia.org/wikipedia/en/2/28/Pok%C3%A9mon_Bulbasaur_art.png",
        Picachu: 
        "https://lh3.googleusercontent.com/proxy/Dg3P7dVfY0IqFPV6XXl22Lzi9uBSmHpMx79U9NawZkEKLhwxUltkdWYV4qvAufHO9s_UIFdjmDKR3aEeIovcQgfVLydin1V3HOf_o7dyF2bNLyMWqqONsUQk",
    default:
        "https://vignette.wikia.nocookie.net/pokemon/images/4/44/Pok%C3%A9_Ball.jpg/revision/latest?cb=20090507215041"
};


var changePokemonImage = function() {
    const value = this.options[this.selectedIndex].value;
    var imageURL = images[value];
    document.getElementById("image").src = imageURL;
};

var pokemonList = document.getElementById("pokemonList");
pokemonList.addEventListener("change", changePokemonImage, false);

document.getElementById("image").src = images["default"];

CODEPEN

You have an object there with names and urls, you could restructure that object to also include the size of the particular image:

var images = {
    Bulbasaur: {
       url: "https://upload.wikimedia.org/wikipedia/en/2/28/Pok%C3%A9mon_Bulbasaur_art.png",
       size: 100
    },
    Picachu: {
       url: ...
       size: 50
    }
}

You’d have to change your changePokemonImage function to get the URL. In that function, you can then also give every image a class name, depending on the size value. For example class="size100".

Then in your CSS, you style your images like this:

.size100 {
    width:100px;
}
.size50 {
    width:50px;
}
1 Like