图片需通过 grid item 的 aspect-ratio 和 img 的 width/height + object-fit 控制尺寸与填充，grid 仅划分轨道；响应式列数用 repeat(auto-fit, minmax(300px, 1fr))，老浏览器回退 padding-top 百分比 hack。
图片本身不响应 Grid 容器比例，得先锁住容器
Grid 只管划分轨道，不管里面的内容怎么长。你给 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))，图片该拉伸还是拉伸，该留白还是留白——除非你让它的父容器（即 grid item）有确定的宽高比。
最直接的办法是给每个 .gallery-item（或你用的卡片容器）加 aspect-ratio: 4 / 3。注意：这个属性必须写在 grid item 上，不是 grid 容器上；也不能写在 <img> 上——因为图片自带固有宽高比，会覆盖 aspect-ratio 声明。
-
aspect-ratio在 Chrome 88+、Firefox 89+、Safari 15.4+ 支持良好，iOS 15.4+ 也没问题 - 旧版 Safari（如 iOS 15.2）会完全忽略它，降级为自然高度，需 fallback
- 别同时设
width和height，否则aspect-ratio不触发计算 - 容器需是块级或 flex/grid，否则
aspect-ratio可能无效
图片填满容器且不变形，靠 object-fit 不是 width/height
就算容器有了固定比例，<img> 默认仍按原始尺寸渲染，可能溢出或留白。必须显式控制它的填充行为：
- 给
<img>设width: 100%和height: 100%，让它撑满父容器 - 再加
object-fit: cover（裁剪居中，适合封面图）或object-fit: contain（完整显示，四周可能留白） - 避免用
object-fit: fill——它会强制拉伸，破坏比例 - 如果图片是 inline 元素，默认不响应
height: 100%，记得先加display: block
Grid 轨道定义要配合 minmax()，别硬写 1fr 1fr 1fr
固定列数写法如 grid-template-columns: 1fr 1fr 1fr 在小屏下会让每列窄到无法容纳图片，导致内容挤压甚至换行错乱。真正响应式的写法是让列数随屏幕变化：
- 用
repeat(auto-fit, minmax(300px, 1fr))：最小 300px，大屏时均分，小屏自动减少列数 -
auto-fit比auto-fill更实用——空列会被合并，不会留大片空白 - 配
gap: 1rem控制间距，别依赖justify-content对齐，容易和gap冲突 - 移动端若仍有溢出，把
1fr换成minmax(0, 1fr)，防止最小内容尺寸干扰比例
兼容老浏览器时，padding-top 百分比 hack 仍是可靠 fallback
如果你的项目还需支持 iOS 15.3 或更早版本，aspect-ratio 会失效，此时得回退到 padding hack：
- 容器设
position: relative和box-sizing: border-box - 子元素（图片层）设
position: absolute; top: 0; left: 0; width: 100%; height: 100% - 容器自身加
padding-top: 75%（对应 4:3）或padding-top: 100%（正方形） - 别忘了
min-height: 0防止 flex/grid 下容器塌陷 - 这个方案不依赖 JS，也不需要额外 wrapper，但结构略重
<img> 主动适配而非被动渲染。很多人卡在“写了 aspect-ratio 却没效果”，往往是因为图片没设 width/height，或者容器被其他样式（比如 display: inline）悄悄干扰了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
