在CSS Grid中如何实现子元素固定宽高比的响应式画廊？-css教程-PHP中文网

直接用 aspect-ratio 配合 grid 自动列数是最可靠、代码最少的方案；grid-template-columns 仅分配轨道尺寸，无法约束子项宽高比，必须由 aspect-ratio 在容器上声明比例并配合 width:100% 和 object-fit 实现统一缩放。

在css grid中如何实现子元素固定宽高比的响应式画廊？

直接用 aspect-ratio 配合 Grid 自动列数，是目前最可靠、代码最少的方案。旧浏览器兜底才需要 padding-top hack。

为什么不能只靠 grid-template-columns 控制宽高比

Grid 的 grid-template-columns 和 grid-template-rows 只管轨道尺寸分配，不约束子元素自身比例。哪怕你设了 minmax(200px, 1fr)，图片仍可能被拉伸、裁剪错位，或因原始尺寸差异导致网格“高低不平”。

真正起作用的是让每个网格项（或其内部容器）维持固定宽高比，再让内容在里面适配。

aspect-ratio: 1 / 1 是现代标准，浏览器自动计算高度（或宽度），与 Grid 完全兼容
不要给 img 直接设 height 或 max-height，会破坏比例逻辑
若需兼容 IE 或旧版 Safari（padding-bottom hack，但必须配合 position: relative + absolute 子元素

用 aspect-ratio + object-fit 实现整齐画廊

关键不是“让图片缩放”，而是“让容器守比例，再让图片填满”。这样无论原始图是 4:3、16:9 还是 SVG，视觉都统一。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

给网格项（如 .grid-item）设 aspect-ratio: 1 / 1，它就永远是正方形
图片设 width: 100%; height: 100%; object-fit: cover;，保证填满且不畸变
避免同时设 height: auto —— 它和 aspect-ratio 冲突，后者优先级更高
加 overflow: hidden 防止 object-fit: cover 溢出边框

示例：

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.grid-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
}
.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

auto-fit 列数和 aspect-ratio 的协同效果

很多人卡在“为什么小屏还是两列？”。问题往往不在 aspect-ratio，而在 minmax() 的最小值没被满足。

假设你写 minmax(250px, 1fr)，而容器宽度只有 240px，那连一列都塞不下，auto-fit 就会退化为单列，但该列宽度仍是 240px → 此时 aspect-ratio: 1/1 让它变成 240×240 的正方形，高度陡增
如果希望小屏也保持紧凑，把最小值调低（如 180px），或改用 clamp(180px, 25vw, 1fr) 做更柔性的下限
auto-fit 会合并空轨道，auto-fill 则保留空轨道 —— 画廊场景一律用 auto-fit，否则留白难控制