如何在JavaScript应用中调整图片大小？音乐节奏练习卡片布局问题

以下是修复后的完整代码，解决了卡片无法缩小和上下堆叠的问题：

HTML #

<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">
    <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">
  </div>
</div>

CSS #

.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;
  /* flex布局实现横向排列 */
  display: flex;
  /* 控制卡片间距 */
  gap: 20px;
}

/* 直接控制图片尺寸实现缩放 */
.card img {
  /* 设置自定义尺寸，可根据需求调整 */
  width: 200px;
  /* 保持图片比例不变 */
  object-fit: contain;
}

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);

关键修改说明 #

1. 卡片横向排列：给.card容器添加display: flex和gap属性，flex布局会自动将内部img元素横向排列，gap可控制卡片间的间距，避免拥挤。
2. 卡片尺寸控制：直接给.card img设置width（或max-width）属性，配合object-fit: contain保证图片不会变形。原代码仅给容器设置max-width，未控制图片本身，导致图片保持原始尺寸。
3. 简化结构：移除包裹img的p标签，p标签默认的块级特性会干扰横向排版，直接将img放在.card容器里更简洁。

内容的提问来源于stack exchange，提问作者tim