图片在表格中拉伸变形的根本原因是同时设置不匹配原图比例的width和height属性；仅设width或height可保持比例；CSS推荐用max-width:100%+height:auto，并配合table-layout:fixed和aspect-ratio/object-fit实现响应式居中不失真。
为什么图片在表格里一设宽高就拉伸变形
根本原因是同时写了 width 和 height 两个固定像素值，而这两个值跟原图比例不一致。比如原图是 16:9，你硬写成 width="200" height="200"，浏览器只能强行压缩高度、拉伸宽度——它不会“猜”你要保持比例。
- 只写
width属性（如width="300"），高度会自动按原始比例算出来，不变形 - 只写
height也同理，但实际用得少，因为表格列宽更关键 -
width和height的值不能带单位，width="300px"是无效 HTML，会被忽略
用 CSS 控制图片大小最稳的写法
在表格单元格里放图片，别靠 HTML 属性硬控，直接上 CSS：必须组合使用 max-width: 100% 和 height: auto。缺了 height: auto，哪怕写了 max-width，图片也会被压扁或撑高。
- 给
img加样式：img { max-width: 100%; height: auto; } - 确保父
td有明确宽度（比如width: 150px或用table-layout: fixed），否则max-width: 100%会按整个视口算，小图被拉大变模糊 - 如果表格列宽由内容撑开，加
table { table-layout: fixed; }并给每列td设width，不然图片尺寸一变，整列跟着晃
固定尺寸单元格里怎么让图片居中又不失真
当 td 是固定宽高（比如 width: 120px; height: 80px），光靠 max-width 不够——图片可能太小留白多，或太大溢出。这时候要分两步：先用 aspect-ratio 锁容器比例，再用 object-fit 控制图片怎么塞进去。
- 给
td加aspect-ratio: 3/2（对应 120×80），它会自动维持这个比例，不怕内容撑变形 - 给
img加width: 100%; height: 100%; object-fit: cover;，图片等比缩放填满，多余部分裁掉 - 如果想完整显示不裁剪，用
object-fit: contain;，但要注意留白位置——默认居中，可加object-position: top left调整 -
aspect-ratio在 Chrome/Firefox/Edge 107+ 支持良好，Safari 15.4+ 也行；老浏览器 fallback 方案是用 padding-top 百分比模拟，但代码更重
容易被忽略的三个坑
很多页面图片在表格里看着正常，一到手机上就糊、错位、跳动，问题往往出在这几个细节上。
立即学习“前端免费学习笔记（深入）”；
-
img默认是 inline 元素，底部会有几像素空白——加display: block或vertical-align: top消掉 - 移动端 Safari 有时对
max-width: 100%响应迟钝，尤其没设<meta name="viewport">时，补一句width: 100%更保险 - 表格里图片多，别只靠 CSS 缩放，
srcset必须配sizes，否则 iPhone 会下 3x 图却只显示 100px 宽，结果糊成马赛克
