图片容器必须用 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">。
<ul>
<li>容器设 <code>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></picture>+<source media></source>回退
content-visibility 不是用来懒加载图片的
给图片容器加 content-visibility: auto，不会阻止图片请求发起，Network 面板里能看到请求早已发出——它只跳过渲染，不跳过下载。
- 真正延迟加载靠的是
loading="lazy"，且需 DOM 顺序合理：LCP 图片不能出现在content-visibility容器之后 - 该属性只适合离屏、高度固定的长列表区块（如第 20 页后的商品卡片），且必须配
contain-intrinsic-size - Firefox Android 和旧版 iOS Safari 不支持，强行使用会导致空白或布局错乱
sizes 值与真实容器宽度的偏差，以及把 content-visibility 当成懒加载开关。这两处一错，图片要么糊，要么卡首屏。
