用 aspect-ratio 锁定容器比例，object-fit: cover 裁剪填充，配合 grid-auto-rows 和懒加载，实现高保真响应式图片画廊。
图片画廊在小屏上被拉伸变形？用 object-fit + aspect-ratio 控制裁剪与比例
Bootstrap 默认的 .img-fluid 只做等比缩放，不保比例容器，图片宽高比一变就糊。真正响应式画廊得让每张图“自己守着自己的比例”，而不是靠父容器硬撑。
关键不是给 <img> 设固定宽高，而是用 CSS 容器锁定比例，再让图片在里面自适应填充：
-
aspect-ratio: 4 / 3（或1 / 1）写在包裹<img>的<div> 上，强制容器维持比例，不随屏幕挤压变形<li> <code><img>加width: 100%; height: 100%; object-fit: cover;—— 填满且裁剪，避免留白或拉伸 - Bootstrap 5.3+ 原生支持
aspect-ratio，旧版本需用padding-top伪比例（见下条）
Bootstrap 5.2 及更早版本怎么模拟 aspect-ratio？用 padding-top 百分比技巧
老版本不认 aspect-ratio，但可以用相对定位 + padding-top 配合绝对定位子元素来骗出比例容器。这不是 hack，是 CSS 经典方案。
例如实现 16:9 容器：
.ratio-16x9 {
position: relative;
width: 100%;
}
.ratio-16x9::before {
content: "";
display: block;
padding-top: 56.25%; /* 9 / 16 = 0.5625 */
}
.ratio-16x9 > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
- 必须用
::before生成占位块，padding-top百分比基于父容器宽度计算，天然形成比例 -
<img>必须设position: absolute才能撑满这个“空盒子” - Bootstrap 5.2 没内置该类，得自己加进 CSS；5.3 起才有
.ratio工具类（如.ratio-16x9）
Grid 列数随屏幕变化但图片高度不一致？用 grid-auto-rows + minmax() 统一行高
单纯用 .row + .col-*，图片原始高度不同会导致网格错位——尤其瀑布流感强的画廊，视觉割裂明显。
- 别依赖
col的默认行为，改用 CSS Grid：给父容器设display: grid和grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) - 加
grid-auto-rows: minmax(200px, auto)，确保每行至少 200px 高，图片再短也会被容器托住 - 配合前面的
aspect-ratio容器，就能做到列数响应变化、单图比例稳定、整行高度齐平 - 注意：Bootstrap 的
.row是 Flex，想用 Grid 得绕开它，直接写class="d-grid"或自定义类
加载大量图片时卡顿或布局抖动？用 loading="lazy" + decoding="async"
画廊图片一多，滚动时重排重绘频繁，尤其在中低端设备上，用户会明显感知到“跳帧”或“图片突然往下掉”。
- 每个
<img>加loading="lazy"，让浏览器只加载视口内图片 - 加
decoding="async"，避免解码阻塞主线程（Chrome/Firefox 支持良好） - 别用 JS 插件做懒加载——现代浏览器原生支持更轻量、更可靠
- 如果画廊初始渲染后还要动态增删图片，记得对新
<img>元素也设置这两个属性，否则新增部分不生效
实际最难控的不是代码写法，是设计师给的图没统一尺寸、没压缩、甚至带 ICC 色彩配置——这些都会让 object-fit 表现异常或加载变慢。上线前务必检查原始图片质量，而不是只调 CSS。
