table-layout: fixed 是实现等宽表格的硬性前提，否则 width: 25% 在 th/td 上无效；需配合 border-collapse: collapse、 显式设列宽；图片等比缩放需 display: block; width: 100%; height: auto; max-height: 100%; object-fit: cover；固定宽高比用 padding-top 技巧；transform 缩放易引发溢出、模糊与交互问题。
table-layout: fixed 是等宽表格的硬性前提
不加 table-layout: fixed，width: 25% 在 th 或 td 上基本无效——浏览器会按内容重算列宽，尤其当图片原始尺寸差异大时，外侧列会被撑开，四列根本不对齐。
必须给 <table> 设置：<br><code>table { table-layout: fixed; width: 100%; border-collapse: collapse; }
-
border-collapse: collapse避免默认边框间距干扰宽度计算 - 不要依赖
tbody td { width: 1% }这类“取巧”写法，它只是触发重排的副作用，不可控 - 更稳妥的方式是加
<colgroup></colgroup>显式定义四列：<col span="4" style="width: 25%">
img 在 TD 内等比例缩放的关键 CSS 组合
只写 max-width: 100% 不够：如果父 td 高度没约束，图片可能溢出或拉伸；只设 height: 100% 又会强制变形。真正起效的是这组配合：
img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: cover; }
-
display: block消除行内元素默认的底部空白 -
width: 100%+height: auto保证等比缩放基础 -
max-height: 100%防止图片高度超出td（尤其竖图） -
object-fit: cover在保持比例前提下裁剪适配，比contain更适合画廊场景
响应式固定宽高比容器（兼容老浏览器）
如果需要统一每张图的显示比例（如 4:3 或 1:1），又不想用现代 aspect-ratio（IE/旧安卓不支持），得用 padding-top 技巧：
把 img 提到父容器外，用 div 模拟占位：
td .img-container {
position: relative;
width: 100%;
padding-top: 75%; /* 4:3 → 100 / 4 * 3 = 75% */
overflow: hidden;
}
.img-container img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
}
- padding-top 百分比始终相对于父容器宽度，所以能稳定生成比例区域
- 绝对定位的
img填满该区域，object-fit控制裁剪方式 - 此方案在 iOS 微信、Android Chrome、甚至 IE11 都能可靠运行
transform: scale() 用于整体缩放时的偏移陷阱
用 transform: scale(1.2) 放大整个表格很直观，但容易忽略两个问题：
- 缩放后表格物理尺寸未变，只是视觉放大，可能溢出父容器——需额外加
overflow: hidden或包裹层transform-origin: top left - 缩放会模糊文字和边框，特别是非整数倍（如 1.3）时，亚像素渲染导致锯齿
- 移动端双指缩放与
transform缩放叠加，交互混乱；真要支持用户缩放，优先用 viewport 缩放或 rem 动态调整
真正需要动态缩放画廊时，建议直接操作 img 的 max-width 和容器 font-size（配合 rem），比 transform 更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
