图片自适应需用 max-width: 100% + height: auto 组合，配合响应式容器与 srcset/sizes 实现等比缩放、防溢出、带宽优化。
图片在容器内自动缩放、不溢出、保持宽高比，关键不是靠 width: 100% 单独撑开，而是要配合 max-width 和 height: auto —— 否则在小屏上可能被拉伸变形，大屏上又可能撑破容器。
用 max-width: 100% + height: auto 控制基础缩放
这是最核心的组合。仅设 width: 100% 会让图片强行拉满宽度、破坏原始比例；而 max-width: 100% 表示“最多占满父容器”，超出时自动等比缩小，height: auto 则确保高度随宽度联动变化。
常见错误：给 width: 100% 还加 height: 100% —— 这直接锁死宽高，必然失真。
- 必须写在
- 父容器需有明确宽度（比如
width: 100%或max-width: 600px），否则max-width: 100%无参照 - 如果父容器是 flex 或 grid 项，注意检查是否被设置了
min-width: auto（flex 默认行为），它会阻止图片收缩，此时需显式加min-width: 0
响应式图片用 srcset + sizes 选合适分辨率
光靠 CSS 缩放解决不了带宽浪费问题：手机加载桌面尺寸图，既慢又耗流量。HTML5 原生支持根据视口宽度选不同源图，比 JS 切图更轻量、更可靠。
立即学习“前端免费学习笔记（深入）”；
典型错误：只写 srcset 不配 sizes，浏览器无法判断“这张图在当前布局下大概占多宽”，只能按默认规则（通常是视口宽度）选图，结果往往偏大。
-
srcset列出多个资源及对应宽度描述，如"small.jpg 480w, medium.jpg 768w, large.jpg 1200w" -
sizes告诉浏览器“这张图在不同断点下占多少视口宽度”，例如sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" - 浏览器结合两者，选出最接近且不小于
sizes计算值的资源，再下载
容器本身也要响应式，避免固定宽高卡死布局
图片能自适应的前提是它的父容器不“硬扛”。比如一个 最易被忽略的是父容器的 max-width 也只在框里缩，无法真正适配视口。
width: 100%、max-width: 100%、flex-basis 或 grid-template-columns 中的 fr/minmax()
height（除非必要），尤其不要设固定像素值；若需等比占位（如 16:9），用 padding-top: 56.25% + position: relative + 绝对定位图片更稳妥object-fit: cover 或 contain 时，务必确认容器已有明确宽高，否则无效min-width 行为（尤其在 flex 布局中）和 sizes 属性缺失导致的资源误选——这两处一错，图片看着“好像能缩”，实则加载低效或布局错乱。
