display: grid 是最干净可靠的图片三等分自适应布局解法，用 grid-template-columns: repeat(3, 1fr) 实现等宽伸缩，图片设 width: 100%、height: auto 及 object-fit 控制填充行为，并通过 @supports 优雅降级至 flex。
用 CSS Grid 实现图片三等分自适应布局
直接说结论：不用 float、不用 flex 模拟三分，display: grid 是最干净可靠的解法。它天然支持等宽 + 自动伸缩，且响应式控制粒度细。
常见错误是强行用 width: 33.333% + float 或 inline-block，结果在不同屏幕下溢出、换行错乱，或者图片被拉伸变形。
-
必须设容器
grid-template-columns: repeat(3, 1fr)——1fr表示等分可用空间，比百分比更健壮 - 图片本身加
width: 100%和height: auto，防止失真；若需固定宽高比，用aspect-ratio（现代浏览器）或padding-top技巧 - 移动端想变单列？加媒体查询：
@media (max-width: 768px) { grid-template-columns: 1fr; }
图片被拉伸/裁剪？检查 object-fit 和容器约束
三分排列后图变胖变扁，大概率是没管好图片的“填充行为”。<img alt="html如何将图片三分排列伸缩" > 默认会撑开容器，而不是按比例缩放进格子。
- 给图片加
object-fit: cover（裁剪居中）或object-fit: contain（完整显示，留白） - 确保父容器（grid item）没有写死
height，否则object-fit失效；优先用min-height或依赖图片自身比例 - 旧版 Safari 不支持
object-fit？那就用背景图替代：background-image: url(...); background-size: cover;
Grid 在 IE 中不工作？别硬扛，降级方案要明确
IE10/11 对 Grid 支持极差（尤其 repeat() 和 fr 单位），强行加前缀也容易翻车。真要兼容 IE，就别用 Grid 做主方案。
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex+flex: 1三等分，但需注意：IE10/11 的flex计算有 bug，建议写成flex: 0 0 33.333% - 用
display: table降级（兼容性最好），但语义偏离、响应式难控，仅作保底 - 更现实的做法：用
@supports (display: grid)包裹 Grid 代码，IE 自动走 flex 分支
为什么不用 JavaScript 计算宽度？
有人用 JS 读取容器宽度再手动设 style.width，这属于过度设计。既增加重排风险，又破坏 CSS 的流式逻辑。
- JS 动态计算在窗口 resize 时易抖动，尤其配合图片加载，常出现闪动或错位
- 服务端渲染（SSR）或无 JS 环境下直接失效
- 所有现代 CSS 布局能力（Grid / Flex / clamp()）都足够覆盖三分伸缩场景，无需 JS 干预
