角色格斗模拟网站插入图片显示平铺而非原分辨率问题求助

你的核心问题是用背景图展示图片时，未配置背景图的重复规则和容器尺寸：

• 默认background-image会以repeat模式平铺图片
• 你创建的characterDiv仅靠角色名称撑出大小，无法匹配图片原始分辨率，导致图片被切割重复

方案一：调整背景图CSS属性（保留背景图实现） #

修改添加角色的代码段，给容器加上背景图控制样式和固定尺寸：

var addCharacterButton = document.createElement('button');
addCharacterButton.id = 'addCharacterButton';
addCharacterButton.innerHTML = 'Add Character';
addCharacterButton.onclick = function() {
  var characterName = document.getElementById('characterNameInput').value;
  var characterImage = document.getElementById('characterImageInput').value;
  var character = {
    name: characterName,
    image: characterImage
  };
  characterList.push(character);
  var characterDiv = document.createElement('div');
  characterDiv.innerHTML = character.name;
  characterDiv.style.backgroundImage = 'url(' + character.image + ')';
  // 关键修改：禁止平铺+适配容器
  characterDiv.style.backgroundRepeat = 'no-repeat';
  characterDiv.style.backgroundSize = 'contain'; // 保持图片比例完整显示
  // 给容器设置固定尺寸，匹配图片预期大小
  characterDiv.style.width = '200px';
  characterDiv.style.height = '300px';
  // 优化文字显示
  characterDiv.style.color = 'white';
  characterDiv.style.textShadow = '1px 1px 2px #000';
  characterDiv.style.padding = '10px';
  characterListDiv.appendChild(characterDiv);
};
document.body.appendChild(addCharacterButton);

方案二：使用<img>标签展示图片（更推荐） #

图片属于内容而非装饰性背景，用<img>标签是语义化的选择，也更易控制：

var addCharacterButton = document.createElement('button');
addCharacterButton.id = 'addCharacterButton';
addCharacterButton.innerHTML = 'Add Character';
addCharacterButton.onclick = function() {
  var characterName = document.getElementById('characterNameInput').value;
  var characterImage = document.getElementById('characterImageInput').value;
  var character = {
    name: characterName,
    image: characterImage
  };
  characterList.push(character);
  var characterDiv = document.createElement('div');
  // 创建图片元素
  var charImg = document.createElement('img');
  charImg.src = character.image;
  // 限制图片最大尺寸，避免撑乱布局
  charImg.style.maxWidth = '200px';
  charImg.style.maxHeight = '300px';
  // 创建名字标签
  var nameLabel = document.createElement('div');
  nameLabel.textContent = character.name;
  nameLabel.style.color = 'white';
  nameLabel.style.textShadow = '1px 1px 2px #000';
  nameLabel.style.padding = '5px';
  // 组装容器
  characterDiv.appendChild(charImg);
  characterDiv.appendChild(nameLabel);
  characterDiv.style.display = 'inline-block';
  characterDiv.style.margin = '10px';
  characterDiv.style.textAlign = 'center';
  characterListDiv.appendChild(characterDiv);
};
document.body.appendChild(addCharacterButton);

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