最可靠自适应写法是 img { width: 100%; height: auto; }，确保等比缩放；响应式需配合 srcset/sizes 下载合适尺寸图片；固定容器用 object-fit: cover 填满不畸变；Flex/Grid 中加 max-width: 100% 和 flex-shrink: 0 防撑开。
img 宽度设为 100% 但高度不塌陷
直接写 img { width: 100%; height: auto; } 是最常用也最可靠的自适应起点。它让图片按容器宽度等比缩放，同时保持原始宽高比。关键在于 height: auto —— 如果漏掉这句，浏览器可能按图片原始高度渲染，导致拉伸或错位。
常见错误是给父容器加了 height: 200px 之类固定值，又没给 img 设 max-height: 100%，结果图片溢出或被裁剪。建议优先用流式容器（如 max-width: 100% + 内边距控制），而非强制定高。
响应式图片用 srcset 和 sizes
单纯靠 CSS 缩放会下载原图，浪费带宽。真正适配不同设备得靠 HTML5 原生属性：srcset 提供多分辨率源，sizes 告诉浏览器“在什么视口宽度下该用多宽的容器”。例如：
@@##@@
注意点：
立即学习“前端免费学习笔记（深入）”；
-
srcset中的w单位是图片源的**固有宽度**（不是显示宽度） -
sizes的值必须和 CSS 中该图片所在容器的**实际显示宽度逻辑一致**，否则浏览器选错源 - 如果只用
srcset不配sizes，浏览器默认按 100vw 算，可能选大图
父容器限制宽高时用 object-fit
当容器尺寸固定（比如卡片头像、网格项），又想让图片填满且不畸变，object-fit 是唯一干净解法。它作用于 img 元素本身，类似 background-size：
jQuery网页全屏自适应图片瀑布流布局代码，能够自适应网页的大小，这样的效果还是很酷炫的，在项目中，需要用到瀑布流，还是用自适应的会更佳，php中文网推荐下载！
常用组合：
-
object-fit: cover：等比缩放并裁剪，填满容器（最常用） -
object-fit: contain：等比缩放并留白，完整显示全图 -
object-fit: fill：强行拉伸填满（一般不用）
注意：IE 不支持，需要 fallback 时可配合 background-image + background-size 替代，但会失去 alt 和 SEO 优势。
Flex/Grid 布局中图片撑开容器的问题
在 display: flex 或 display: grid 容器里，img 默认是「内联替换元素」，容易因原始尺寸撑开父容器，破坏布局。解决方法很简单：
- 给
img加flex-shrink: 0防止被压缩（仅需收缩时） - 更通用的是加
max-width: 100%+height: auto，再配合align-self: center居中 - Grid 中若用
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))，图片仍需自身约束，否则小图也会占满整列
容易忽略的是：如果父容器用了 min-width 或 min-height，而图片原始尺寸更小，就可能出现空白间隙——这时要检查是否误设了 object-fit: cover 却没配 object-position 控制焦点。
