點擊角色可兩張美術圖做切換且控制排版
css

.image-wrapper img {
  width: 700px; /* 控制图片的宽度，可以根据需要调整 */
  height: 700px; /* 控制图片的高度，可以根据需要调整 */
  object-fit: contain; /* 保持图片比例并填充容器 *//*scale-down*/
}

javascript

var myImages = document.querySelectorAll("img");

myImages.forEach(function(myImage) 
{
  myImage.onclick = function() 
  {
    let mySrc = myImage.getAttribute("src");
    if (mySrc === "images/character/wraith/隱鬼.png") {
      myImage.setAttribute("src", "images/character/wraith/Dead-By-Daylight-Wraith-1.png");
    } else if (mySrc === "images/character/wraith/Dead-By-Daylight-Wraith-1.png") {
      myImage.setAttribute("src", "images/character/wraith/隱鬼.png");      
    } 

    else if (mySrc === "images/character/doctor/醫生.png") {
      myImage.setAttribute("src", "images/character/doctor/doctor.jpg");
    } else if (mySrc === "images/character/doctor/doctor.jpg") {
      myImage.setAttribute("src", "images/character/doctor/醫生.png");
    }

    else if (mySrc === "images/character/oni/鬼武士.png") {
      myImage.setAttribute("src", "images/character/oni/oni.jpg");
    } else if (mySrc === "images/character/oni/oni.jpg") {
      myImage.setAttribute("src", "images/character/oni/鬼武士.png");
    }

    else if (mySrc === "images/character/blight/枯魔.png") {
      myImage.setAttribute("src", "images/character/blight/blight.jpg");
    } else if (mySrc === "images/character/blight/blight.jpg") {
      myImage.setAttribute("src", "images/character/blight/枯魔.png");
    }

    else if (mySrc === "images/character/bili/比利.png") {
      myImage.setAttribute("src", "images/character/bili/bili.jpg");
    } else if (mySrc === "images/character/bili/bili.jpg") {
      myImage.setAttribute("src", "images/character/bili/比利.png");
    }

    else if (mySrc === "images/character/trapper/夾子.png") {
      myImage.setAttribute("src", "images/character/trapper/trapper備用.jpg");
    } else if (mySrc === "images/character/trapper/trapper備用.jpg") {
      myImage.setAttribute("src", "images/character/trapper/夾子.png");
    }

    else if (mySrc === "images/character/bubba/bubba.png") {
      myImage.setAttribute("src", "images/character/bubba/bubba.jpg");
    } else if (mySrc === "images/character/bubba/bubba.jpg") {
      myImage.setAttribute("src", "images/character/bubba/bubba.png");
    }

    else if (mySrc === "images/character/artist/artist.png") {
      myImage.setAttribute("src", "images/character/artist/artist.jpg");
    } else if (mySrc === "images/character/artist/artist.jpg") {
      myImage.setAttribute("src", "images/character/artist/artist.png");
    }
  };
});