用 grid + srcset + max-width: 100% 实现真响应式图片需满足三条件：max-width: 100%、height: auto、display: block（或 flex 中 min-width: 0）；grid 列数用 repeat(auto-fill, minmax(280px, 1fr)) 自适应；srcset 配 sizes 才生效，否则退化为 src。
直接用 grid + srcset + max-width: 100% 就能跑通，但漏掉 height: auto 或 min-width: 0 会导致图片拉伸或不收缩——这不是“看起来像响应式”，而是真出问题。
用 CSS Grid 快速生成自适应画廊列数
别手写媒体查询来切列数，grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 一行搞定：小屏自动变单列，中屏两列，大屏三列或更多，且每列最小 280px、最大均分剩余空间。注意两点：
-
auto-fill比auto-fit更稳妥——它会保留空列占位，避免内容挤成一坨 - 容器必须设
width: 100%或明确宽度，否则 grid 可能塌缩 - 如果父容器是
display: flex，子<img>必须加min-width: 0，否则它会拒绝缩小
图片资源不瘦身，再 responsive 都是假的
max-width: 100% 只控制渲染尺寸，不减少下载量。手机加载一张 1920px 的图再缩到 375px，流量白跑。必须配 srcset 和 sizes：
-
srcset里只用w单位（如"small.jpg 480w, medium.jpg 768w"），别混x -
sizes要匹配真实布局：比如在 768px 断点下图片占容器 1/3 宽，就写sizes="(max-width: 768px) 100vw, 33.33vw"，不是硬填100vw - 漏写
sizes，浏览器直接忽略整个srcset，退化为只加载src
防止图片变形和溢出的三个硬性条件
三者缺一不可，否则必出视觉 bug：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
max-width: 100%—— 限制宽度上限 -
height: auto—— 保持原始宽高比，漏写就会纵向拉伸 -
display: block（或flex容器中加min-width: 0）—— 解决 inline 元素默认min-width: auto导致的收缩失效
别依赖 <picture> 除非真需要艺术裁剪
如果只是适配不同分辨率（比如 Retina 屏更清晰），srcset + sizes 足够轻量；只有当你需要「手机显示人脸特写、桌面显示全景」这类构图差异时，才用 <picture>：
-
<source>的media和type是 AND 关系，任一不满足就跳过 - 顺序很重要：最具体规则放最前，兜底
<img>放最后 - 拼错
type="image/webp"（比如多写分号）或media里空格不规范（如(max-width: 768px)在旧 Edge 中会失效），整条<source>就被无视
真正容易卡住的地方不在语法，而在同步：CSS 布局改了，sizes 没跟着调；图片物理尺寸变了，srcset 的 w 值没更新；这些细节不会报错，但用户在手机上永远加载着桌面图。
