如何按表格单元格裁剪图片？附含图片的表格代码示例

嗨，我来帮你搞定按表格单元格尺寸裁剪图片的问题～结合你给出的表格代码，这里有两种实用方案：

你的表格单元格td#tdimg已经设置了固定高度500px，表格总宽度800px且开启了table-layout:fixed，只需要几步就能让图片适配单元格并自动裁剪：

1. 给单元格加上overflow:hidden，确保超出单元格的图片部分被隐藏；
2. 给单元格内的图片设置宽高100%，并通过object-fit属性控制裁剪/适配逻辑。

修改后的完整CSS代码如下：

body { 
  font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif 
}
table, th, td { 
  border: 1px solid black; 
  border-collapse: collapse; 
  table-layout:fixed; 
  width:800px; 
}
th, td { 
  padding: 15px; 
  text-align: left; 
}
td#tdimg{ 
  height: 500px; 
  overflow: hidden; /* 关键：隐藏超出单元格的内容 */
}
td#tdimg img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 裁剪图片，保持比例并填满单元格 */
  /* 可选值：
     - contain：完整显示图片，可能在单元格内留空白
     - fill：拉伸图片填满单元格，可能导致变形
  */
}

对应的HTML部分只需要在td#tdimg内放入图片即可：

<td colspan="3" id="tdimg">
  <img src="你的图片地址" alt="描述文本">
</td>

如果你的图片是动态加载的，或者需要更精细的裁剪控制（比如指定裁剪区域），可以用Canvas来实现：

// 获取目标单元格和图片元素
const tdImg = document.getElementById('tdimg');
const img = tdImg.querySelector('img');

// 必须等图片加载完成后再处理
img.onload = function() {
  // 计算单元格的实际可用尺寸（自动扣除padding）
  const cellWidth = tdImg.clientWidth;
  const cellHeight = tdImg.clientHeight;

  // 创建Canvas元素
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 设置Canvas尺寸与单元格一致
  canvas.width = cellWidth;
  canvas.height = cellHeight;

  // 计算裁剪参数：让图片居中裁剪，保持比例
  const scale = Math.max(cellWidth / img.width, cellHeight / img.height);
  const cropWidth = img.width;
  const cropHeight = img.height;
  // 裁剪区域的起始坐标（居中）
  const cropX = (img.width - cellWidth / scale) / 2;
  const cropY = (img.height - cellHeight / scale) / 2;

  // 绘制裁剪后的图片到Canvas
  ctx.drawImage(
    img,
    cropX, cropY, cropWidth, cropHeight, // 原图片的裁剪区域
    0, 0, cellWidth, cellHeight // Canvas上的绘制区域
  );

  // 替换原图片为裁剪后的Canvas
  tdImg.innerHTML = '';
  tdImg.appendChild(canvas);
};

这个方法会自动计算图片的最优缩放比例，裁剪掉超出单元格的部分，同时保证图片居中显示。

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