图片容器必须用 display: grid 或 flex 实现多图自适应列数，推荐 grid；每张图需包裹在带 aspect-ratio 的 div 中，img 设 width/height 100% 和 object-fit；srcset/sizes 需匹配实际容器宽度，content-visibility 不替代 loading="lazy"。

图片容器必须用 display: grid 或 display: flex

只靠 img 自身样式无法实现“多图自适应列数”，必须由父容器控制布局逻辑。用 display: grid 更可靠，display: flex 在 Safari 旧版中对 flex: 1 1 auto 解析不稳定。

• grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) 是移动端首选：小屏自动单列，中屏双列，大屏三列以上，无需媒体查询
• 避免写死 repeat(3, 1fr) —— 小屏会横向溢出，触发滚动条，这不是响应式本意
• 如果必须用 Flexbox，flex-wrap: wrap + flex-basis: 100%（或 min-width: 120px）才能保证换行，且需设 gap 而非 margin

每张图必须包裹在独立容器里

直接把 <img> 放进 grid 或 flex 容器里，会导致 Safari 和部分 Android 浏览器忽略 object-fit 或缩放异常。正确做法是给每张图套一层 <div class="img-wrapper">。

• 容器设 aspect-ratio: 4/3（或你想要的比例），防止图片加载时布局跳动
• <img> 本身设 width: 100%; height: 100%; object-fit: cover;，确保填满且不拉伸
• 加 loading="lazy"，但首屏图要显式写 loading="eager"，否则 LCP 拖慢

srcset 和 sizes 必须配合容器宽度计算

如果 sizes 写成 "100vw" 但父容器只占视口 80%，浏览器会错估所需图片尺寸，导致高清屏加载低清图、或小屏下载超大图。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 假设卡片容器宽度为视口的 90%，则 sizes 应写 "90vw"；若用 grid 的 minmax(120px, 1fr)，推荐断点写法："(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
• srcset 中的宽度值（如 600w）是图片文件本身的像素宽，不是 CSS 像素，别和 width 属性混淆
• Android WebView 和 iOS Safari ≤ 16.4 不支持 srcset 的 w 单位降级，得靠 <picture> + <source media> 回退

content-visibility 不是用来懒加载图片的

给图片容器加 content-visibility: auto，不会阻止图片请求发起，Network 面板里能看到请求早已发出——它只跳过渲染，不跳过下载。

立即学习“前端免费学习笔记（深入）”；

• 真正延迟加载靠的是 loading="lazy"，且需 DOM 顺序合理：LCP 图片不能出现在 content-visibility 容器之后
• 该属性只适合离屏、高度固定的长列表区块（如第 20 页后的商品卡片），且必须配 contain-intrinsic-size
• Firefox Android 和旧版 iOS Safari 不支持，强行使用会导致空白或布局错乱

实际项目里最容易被忽略的，是 sizes 值与真实容器宽度的偏差，以及把 content-visibility 当成懒加载开关。这两处一错，图片要么糊，要么卡首屏。