如何用CSS制作自适应图片画廊？-css教程-PHP中文网

最可靠方案是css grid配合auto-fit与minmax()，核心语法为grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，其中280px为每列最小宽度阈值，auto-fit确保填满空间不溢出，避免使用auto-fill或固定列数。

如何用css制作自适应图片画廊？

用 CSS 制作自适应图片画廊，display: grid 配合 auto-fit 和 minmax() 是当前最可靠、代码最少、维护成本最低的方案。Flexbox 也能做，但列数动态变化时容易出错；纯媒体查询写死断点则难维护。

grid-template-columns: repeat(auto-fit, minmax(...)) 怎么写才不溢出

这是核心语法，但写错一个参数就会导致移动端横向滚动或图片被压扁：

minmax(280px, 1fr) 中的 280px 是最小宽度阈值，不是“建议宽度”——它决定了每列能塞下的最小尺寸；设太高（比如 400px）在手机上直接溢出
必须用 auto-fit，不是 auto-fill：前者会收缩多余列填满空间，后者保留空列占位，造成右侧大片空白
别写成 repeat(3, 1fr) 或 repeat(4, 25%)：这种写法完全失去响应性，小屏照样三列，图片被挤成细条
如果要兼容极窄屏（如折叠屏展开态宽度 @media (max-width: 280px) { grid-template-columns: 1fr; }

图片变形、错位、间隙不均的常见原因

这些问题几乎都源于对 img 元素默认行为的误判，而不是 Grid 本身有问题：

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

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

下载

img 默认是 display: inline，换行符会产生看不见的间隙——必须加 display: block 或设父容器 font-size: 0
给 img 写了 width 或 height 内联样式或 CSS，会覆盖 aspect-ratio——删掉它们，只留 width: 100% 和 height: auto
object-fit: cover 是安全选择，但若想完整显示全部内容，改用 object-fit: contain；注意两者对容器高度的影响不同
间隙靠 gap 控制，不是 margin：把 gap 写在 .gallery 上，别写在 .gallery img 上，否则 gap 不生效

aspect-ratio 在宽高未知时怎么起作用

aspect-ratio 不是“魔法”，它需要图片成为 Grid 直系子元素且未被拉伸才能生效：

确保 img 是 .gallery 的直接子元素，中间不要套 div 包裹层
设 img { width: 100%; height: auto; aspect-ratio: 4/3; }，浏览器会在 layout 阶段就预留空间，避免加载后重排抖动
服务端能返回宽高更好：在 HTML 中写 <img src="x.jpg" style="max-width:90%" style="max-width:90%">，浏览器立刻知道比例，比纯 CSS 更稳
IE 完全不支持 aspect-ratio，但 IE 也不支持 Grid——真要兼容，只能降级用 padding-top 百分比技巧，代价是结构更复杂

真正难的不是写出第一版网格，而是当图片来自 CMS、上传尺寸不一、缩略图生成失败、甚至部分图片 404 时，布局还能保持稳定。这时候 minmax(0, 1fr)、overflow: hidden 和提前声明宽高，比任何 fancy 效果都重要。