如何在javascript中的函数（）{}中定义图像，以调整自动滑块的图像大小？

所以我试图调整一幅图像的大小，这样它就不会在我编写的自动图像放大仪中放大。功能代码就是我遇到的问题。我主要是一个初级程序员，我计划在完成这个网站后正式学习javascript。我主要是通过修改Youtube教程来编写我的网站

以下图像滑块的我的HTML如下所示：

<div class="slider">
<div id="img1">
     <img src="img/Royce Sunrise.JPG">
</div>
</div>

我的javascript如下所示：

var images = ["img/Royce Sunrise.JPG", "img/RoyceLakeImage2.JPG", "img/RoyceLakeImage1.JPG"];

var x = 0;

var imgs = document.getElementById("img1");

var interval = setInterval(slider, 2000);

  //positioning big img center to canvas center
  img.onload = function(){
   
    let x = -(img.width - canvas.offsetWidth)/2+"px"
    let y = -(img.height - canvas.offsetHeight)/2+"px"
    console.log(x, "$$$$");
    console.log(y, "$$$$");
    //scaling....
    let ratio = canvas.offsetWidth/img.width
    console.log(ratio, "$$$$");
 
    img.style.transform = `translate(${x}, ${y}) scale(${ratio})`
 
   }
 
function slider() {

  if (x < images.length) {
    x++;
  } else {
    x = 1;
  }
 
  imgs.innerHTML = "<img src=\"" + images[x - 1] + "\">";
  console.log(images[x-1]);

}

---

让我知道我能修好什么

添加错误是什么？请在你的问题中加上这个。

var images = ["img/Royce Sunrise.JPG", "img/RoyceLakeImage2.JPG", "img/RoyceLakeImage1.JPG"];

var x = 0;

var imgs = document.getElementById("img1");

var interval = setInterval(slider, 2000);

  //positioning big img center to canvas center
  img.onload = function(){
   
    let x = -(img.width - canvas.offsetWidth)/2+"px"
    let y = -(img.height - canvas.offsetHeight)/2+"px"
    console.log(x, "$$$$");
    console.log(y, "$$$$");
    //scaling....
    let ratio = canvas.offsetWidth/img.width
    console.log(ratio, "$$$$");
 
    img.style.transform = `translate(${x}, ${y}) scale(${ratio})`
 
   }
 
function slider() {

  if (x < images.length) {
    x++;
  } else {
    x = 1;
  }
 
  imgs.innerHTML = "<img src=\"" + images[x - 1] + "\">";
  console.log(images[x-1]);

}

img.onload = function(){