用repeat(auto-fit, minmax(250px, 100%))最稳妥，因auto-fit合并空轨道使列均分容器，minmax第二参数须为长度单位（如100%、400px）而非1fr，避免Safari等浏览器退化；必须配父容器width: 100%、缩略图容器aspect-ratio及img{width:100%;height:100%;object-fit:cover}防变形。
用 max-width: 100% 是基础，但光靠它不够
单独写 img { max-width: 100%; height: auto; } 能防止溢出和拉伸，但它只解决单张图在容器内的缩放问题。一旦进入多图并排场景（比如画廊、卡片列表），就会立刻暴露缺陷：列数固定、小屏堆成一柱、高度参差不齐、DPR 高屏下模糊。
常见错误现象：
- 图片在手机上挤成窄条，但没换行 —— 实际是父容器没设
width: 100%或max-width，导致max-width: 100%失效 - 不同原始比例的图混排，网格行高忽高忽低 —— 缺少统一宽高比约束
- Retina 屏显示发虚 —— 没配合
srcset提供 2x 图
grid-template-columns: repeat(auto-fit, minmax()) 怎么写才不翻车
这是当前最稳的响应式图片网格写法，但 minmax() 的第二个参数不能是 1fr —— 它不是“弹性分配”，而是“最大宽度”，必须是长度单位（px、%、vw）。
错误写法：minmax(200px, 1fr)（语法虽被部分浏览器容忍，但属非标准行为，Safari 15.4 之前会退化为单列）
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
-
repeat(auto-fit, minmax(250px, 100%))：最小 250px，最大占满容器（适合卡片类） -
repeat(auto-fit, minmax(300px, 400px))：明确上限，防大屏下单图过宽 - 必须配合父容器
width: 100%或max-width: 1200px，否则minmax()没参照系 - 务必用
auto-fit，不是auto-fill：前者会合并空轨道，让有内容的列自动拉伸填满
图片不变形的关键不在 img，而在它的父容器
直接对 img 设 width: 100%; height: 100% + object-fit: cover 会失败——因为 Grid 行高由内容撑开，而每张图原始比例不同，导致容器高度不一致。
真正可靠的做法：
- 每个
img必须包一层<div>，该div设aspect-ratio: 4/3（或你想要的比例） -
img内部设width: 100%; height: 100%; object-fit: cover; - 若需兼容 Safari 15.4 以下，改用伪元素 + padding-top 技巧模拟 aspect-ratio
- 避免给
img单独设height像素值，高 DPR 屏易出现 0.5px 渲染断裂
别碰 position 做响应式图片网格
用 position: absolute 手动排图，看似可控，实则无法响应容器宽度变化。小屏下图片横向溢出、top/left 像素值在不同设备上偏移、换行完全失效——这些都不是 bug，是定位机制的必然结果。
真实限制：
- 脱离文档流，Grid/Flex 的自动换行、gap、对齐等能力全部失效
- 无法与
srcset/sizes协同工作，高清屏大概率加载错尺寸图 - 动画、焦点管理、可访问性语义全丢失
- 调试时 Chrome DevTools 的 layout 面板无法反映真实布局关系
复杂点往往藏在细节里：比如 aspect-ratio 在旧版 Safari 中需降级，gap 在 flex-wrap 场景中不如 grid 可靠，minmax() 的最小值低于 180px 可能在某些安卓 WebView 中触发渲染异常。这些不是边缘情况，是上线前必须验证的真实断点。
