用 minmax() + auto-fit 实现自适应列数，图片容器设 aspect-ratio 和 overflow: hidden，img 用 object-fit: cover 与 transform: scale() translateZ(0)，配合 focus-within 和 loading="lazy" 提升响应式体验。

用 CSS Grid 实现响应式图片网格，别硬写列数

固定 grid-template-columns: repeat(4, 1fr) 在小屏上会挤成窄条，用户根本点不中图片。应该用 minmax() + auto-fit 让浏览器自动算列数：

display: grid;<br>grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))<br>gap: 12px;

这样在手机上自动缩为 1 列，平板 2 列，桌面 3–4 列，且每列宽度始终 ≥280px，避免图片被压扁。

hover 放大时图片变形？关键是 overflow 和 transform 坐标系

直接对 <img alt="如何设计一个美观的图片库_使用grid布局和hover效果优化图片展示" > 加 transform: scale(1.05) 会撑开容器、触发重排，还可能溢出父盒。正确做法是：

• 给图片父容器（比如 <figure></figure>）设 overflow: hidden
• 对 <img alt="如何设计一个美观的图片库_使用grid布局和hover效果优化图片展示" > 自身加 transition: transform 0.3s ease
• hover 时用 transform: scale(1.05) translateZ(0)，translateZ(0) 强制启用 GPU 加速，避免闪动
• 别忘了加 will-change: transform 提前告知浏览器要动画

图片加载慢、占位空白？用 aspect-ratio + object-fit 控制比例

不同尺寸图片混排时，高度不一致会导致网格错位。解决方法不是 JS 测高，而是纯 CSS：

• 给图片容器设 aspect-ratio: 4/3（或你业务常用的宽高比）
• 图片本身加 object-fit: cover，确保填满且不拉伸
• 配合 loading="lazy" 属性和合适的 srcset，让浏览器按视口宽度选图

这样即使图片还没加载完，容器已有固定宽高，网格不会跳动。

移动端 hover 失效？用 focus-within 模拟交互反馈

触摸设备没有 :hover，但用户仍需知道当前选中了哪张图。可以：

• 给图片容器加 tabindex="0"
• 用 &:focus-within 或 &:focus 触发相同缩放/阴影效果
• 配合 @media (hover: none) 关闭纯 hover 样式，防止误触发

这样既保 PC 端悬停反馈，又让移动端可通过点击+聚焦获得一致体验。 实际项目里最容易被忽略的是图片加载完成前的布局稳定性——光靠 aspect-ratio 不够，得配合服务端返回的宽高字段或提前注入内联样式，否则首屏渲染仍会抖动。