最稳的图片居中方案是父容器设 display: flex + justify-content: center + align-items: center；需注意高度不一致时改用 align-items: flex-start，避免留白异常，并确保父容器有明确宽度。
图片容器用 display: flex 居中最稳
直接给父容器加 display: flex + justify-content: center + align-items: center，能同时处理水平和垂直居中。但注意：如果图片高度不一致或容器有固定高，align-items: center 可能导致上下留白异常；此时改用 align-items: flex-start 更安全，靠外层 padding 或 margin 控制垂直位置。
常见错误是只加 text-align: center——这仅对内联元素（如 <img> 默认行为）有效，一旦图片设了 display: block 就失效。
- 父容器必须有明确宽度（比如
width: 100%或max-width: 1200px），否则flex的居中范围不可控 - 避免给
<img>设固定height，优先用max-width: 100%+height: auto保比例 - 若需多行排列，加
flex-wrap: wrap，再配合gap: 1rem控制间距（比margin更干净）
响应式断点用 grid 比 float 或 inline-block 更可靠
grid 能按屏幕宽度自动调整列数，且无需清除浮动或处理 vertical-align 对齐问题。关键在 grid-template-columns 配合 minmax() 和 auto-fit：
gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
这段代码的意思是：每列最小 280px，最大均分剩余空间，列数随容器宽度自动增减。小屏单列、中屏双列、大屏三列或四列，全由浏览器计算，不用写多个媒体查询。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 别用
auto-fill替代auto-fit——前者会生成空列，影响居中效果 - 如果图片高度差异大，加
grid-auto-rows: minmax(200px, auto)防止某张图过矮拉垮整体行高 - IE 不支持
grid，如需兼容，得降级到flex+ 媒体查询，但现代项目基本可忽略
object-fit: cover 是统一图片视觉高度的关键
相册里原始图尺寸不一，直接等宽缩放会导致留白或变形。object-fit: cover 让图片按比例缩放并裁剪填满容器，配合固定宽高比的容器（如 aspect-ratio: 4/3）就能整齐排列。
常见错误是只设 width: 100% + height: 200px，结果图片被强行拉伸。正确做法是：给包裹 <img> 的 <div> 设宽高和 aspect-ratio，再让 <img> 继承并应用 object-fit: cover。
-
aspect-ratio在 Safari 15.4+ 和 Chrome 88+ 支持良好，旧版可用padding-top百分比 hack 代替 - 慎用
object-fit: contain——它保留完整图像但留白不可控，不利于紧凑排版 - 如果后端无法提供统一比例图，前端用
clip-path强制裁切会丢失语义，不推荐
移动端点击放大需要 touch-action: manipulation
相册在手机上双击缩放经常失灵，是因为浏览器默认禁用了快速双击手势。给图片容器加 touch-action: manipulation 能启用原生双击缩放，同时避免误触滚动。
但注意：这个属性不能加在 <img> 自身，要加在外层可点击的包装元素（比如带 data-lightbox 的 <a> 或 <figure>）。否则 iOS Safari 会忽略。
- 如果用了 lightbox 类库（如 LightGallery.js），确认它是否已内置该样式，重复添加可能引发冲突
- 搭配
cursor: zoom-in提示用户可交互，但别在非触摸设备上显示，可用@media (hover: hover)条件控制 - 不要依赖
user-scalable=no禁用页面缩放——它会影响可访问性，且现代 WCAG 已不建议
真正麻烦的是图片加载时机和占位：没设 width/height 属性的图片会触发布局偏移（CLS），尤其在瀑布流或懒加载场景下。务必为每张图显式声明尺寸，或用 aspect-ratio 预留空间。
