等比例排列图片需用aspect-ratio设父容器宽高比+object-fit控制填充方式，而非仅依赖grid布局；cover裁剪填满，contain完整显示；小屏需clamp()或媒体查询防列崩。
图片等比例排列的核心其实是控制宽高比，不是单纯靠 grid 自己
Grid 本身不负责维持图片宽高比，它只做布局容器。真正起作用的是 aspect-ratio + object-fit 的组合：前者锁住容器比例，后者决定图片如何填满这个固定比例的盒子。如果只用 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))，图片拉伸变形或留白严重是常态。
aspect-ratio 必须设在图片的父容器上，不能直接设在 <img alt="css grid如何实现图片等比例排列_结合对象适应和网格控制" > 标签上
因为 <img alt="css grid如何实现图片等比例排列_结合对象适应和网格控制" > 是替换元素，aspect-ratio 在它上面行为不稳定（尤其 Safari 旧版本会忽略）。正确做法是给每个网格项加一层包裹，比如 <div class="grid-item"><img src="..." alt="css grid如何实现图片等比例排列_结合对象适应和网格控制" ></div>，然后：
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
}
.grid-item {
aspect-ratio: 4 / 3; /* 统一宽高比 */
overflow: hidden;
}
.grid-item img {
width: 100%;
height: 100%;
object-fit: cover; /* 或 contain，按需选 */
}
object-fit 选 cover 还是 contain？取决于内容优先级
这是最容易被忽略的语义选择：
-
cover：保证填满整个容器，但可能裁剪图片边缘 —— 适合封面图、海报类场景 -
contain：完整显示整张图，但会有上下/左右留白 —— 适合证件照、产品多角度图等需保留全貌的场景 - 别用
fill：它会强行拉伸破坏比例，等于白设aspect-ratio
响应式下要防住小屏时 minmax() 失效导致列数崩坏
当视口窄到单列都放不下 minmax(240px, 1fr) 里的 240px 时，auto-fill 会退化成单列且宽度超限。解决方法是加媒体查询兜底，或者改用更柔性的写法：
立即学习“前端免费学习笔记（深入）”；
<pre class="brush:php;toolbar:false;">@media (max-width: 480px) {
.grid {
grid-template-columns: 1fr;
}
}
/* 或者不用 minmax，改用 clamp()（支持较新浏览器） */
grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 25vw, 280px), 1fr));注意：clamp() 中的中间值用 <code>vw 而非固定像素，才能让列宽随屏幕线性缩放，避免小屏溢出。
实际项目里，aspect-ratio 兼容性（IE 完全不支持，旧版 Safari 需 -webkit-aspect-ratio）和图片加载时机（未加载完成前容器高度为 0）仍是两个隐形坑，得靠 JS fallback 或占位符兜住。
