css grid 用 auto-fit + minmax() 实现稳定列数适配，配合 gap、aspect-ratio、box-sizing 等确保响应式图片布局精准对齐。
用 CSS Grid 实现自动列数适配，别碰 flex-wrap
flex-wrap 在图片尺寸不一致或动态加载时容易断行错位，最后一行留白、间隙不均是常态。Grid 的 auto-fit + minmax() 才是稳定解。
核心写法是：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) —— 每列最小 250px，容器够宽就自动加列，填满整行。
- 必须用
gap控制间距，别用margin模拟，否则网格对齐逻辑会崩 - IE 不支持
gap？改用grid-column-gap和grid-row-gap（IE10+ 可用） - 若图片宽高比差异大，统一加
aspect-ratio: 4/3，或套一层div并设overflow: hidden防拉伸变形
figure + inline-block 是图文并排的稳妥方案
直接把 figcaption 跟 img 并列写，它会强制换行——因为 figcaption 默认是块级元素。语义化又不破布局，得靠包装和 display 控制。
推荐写法：.gallery-item { display: inline-block; width: 100%; vertical-align: top; }，比 display: contents 兼容性更好（Safari 旧版不支持后者）。
- 内部用
display: flex; flex-direction: column; justify-content: center;对齐图说更可控 - 避免用
float：浮动脱离文档流，缩放后图片易悬停右侧空白区，而非自然回落到左侧 -
text-align: center放在父容器上即可居中图说文字，不用每个figcaption单独设
图片加载失败时快速定位 + 降级显示
开发阶段光靠 alt 看不出是路径错还是真没图，得靠 JS 监控和控制台技巧补位。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
批量处理用：document.querySelectorAll('img').forEach(img => img.addEventListener('error', e => { /* 逻辑 */ }));
- 开发时快速扫雷：在控制台运行
Array.from(document.images).filter(i => i.naturalWidth === 0)，立刻列出所有加载失败的img元素 - 路径统一用相对路径，从 HTML 文件所在目录起算；避免混用
./images/和images/，容易因入口 HTML 位置变化而失效 - 响应式图片资源本身要适配设备像素比，只写
<img src="photo.jpg">是静态加载，真正响应式得靠srcset+sizes组合
viewport 元标签和 box-sizing 是隐性对齐基础
没有 <meta name="viewport" content="width=device-width, initial-scale=1.0">，移动端缩放行为不可控，图片对齐会随视口缩放“漂移”。
没设 box-sizing: border-box，padding 和 border 会撑大元素，导致 grid 列宽计算失准、间隙错乱。
- 建议全局重置：
* { box-sizing: border-box; }，省去后续反复校准 - 图片本身加
max-width: 100%; height: auto;，防止溢出容器破坏网格结构 - 不要依赖
align属性：HTML5 中<img align>已弃用，所有对齐必须走 CSS
实际项目里最容易被忽略的是 aspect-ratio 和 box-sizing 的组合影响——前者保形，后者保格，缺一就会在缩放或换设备时突然错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
