我给自己设置了一个音乐节奏练习的任务，在一个网站上显示4张卡片，每4秒改变一次。这一切都在工作，但我就是不能把它们变小。我试着上传更小的卡片，并尝试了各种JavaScript片段，但没有任何效果。
我只需要连续4张小牌，而不是4张大牌一张在另一张的上面。
我试着上传小卡片，尝试使用JavaScript更改大小，但不能得到任何工作。这是我到目前为止。（我还没有包括任何改变大小的脚本，不工作）。

var card1Image;
var card2Image;
var card3Image;
var card4Image;

function start() {
  var button = document.getElementById("startButton");
  button.addEventListener("click", pickCards, false);
  card1Image = document.getElementById("card1");
  card2Image = document.getElementById("card2");
  card3Image = document.getElementById("card3");
  card4Image = document.getElementById("card4");
}

function pickCards() {
  setImage(card1Image);
  setImage(card2Image);
  setImage(card3Image);
  setImage(card4Image);
}

function setImage(cardImg) {
  var cardValue = Math.floor(1 + Math.random() * 25);
  cardImg.setAttribute("src", "https://timpratt.uk/wp-content/uploads/2023/04/card" + cardValue + ".png");
}
window.addEventListener("load", start, false);

setInterval(pickCards, 4000);

.table {
  position: relative;
  top: 50px;
  left: 50px;
  width: 1700px;
  height: 800px;
  background-color: white;
}

.key {
  position: absolute;
  top: 15px;
  left: 50px;
}

.startButton {
  width: 80px;
  height: 50px;
  background-color: black;
  color: white;
}

.card {
  position: absolute;
  top: 150px;
  left: 150px;
  max-width: 8px!important;
  max-height: 8px!important;
}

<meta charset="utf-8">
<title>Rhythm Practice</title>

<div class="table">
  <div class="key">
    <form action="#">
      <p><input id="startButton" type="button" value="start"></p>
    </form>
  </div>
  <div class="card">
    <p><img id="card1" src="https://timpratt.uk/wp-content/uploads/2023/04/intro1.png">
      <img id="card2" src="https://timpratt.uk/wp-content/uploads/2023/04/intro2.png">
      <img id="card3" src="https://timpratt.uk/wp-content/uploads/2023/04/intro3.png">
      <img id="card4" src="https://timpratt.uk/wp-content/uploads/2023/04/intro4.png">
    </p>
  </div>

</div>