直接用 img { max-width: 100%; height: auto; } 可解决多数自适应需求，但若父容器无宽度、flex/grid 中 min-width: auto 阻碍缩放、或需兼容老 ios，则易失效；必须配合父容器设宽、min-width: 0、srcset/sizes 正确配置及必要前缀。
直接用 img 标签加 max-width: 100% 和 height: auto 就能解决绝大多数自适应需求；但若父容器没宽高、或用了 Flex/Grid、或要兼容老 iOS，就容易失效——这些才是实际卡住人的地方。
img { max-width: 100%; height: auto; } 为什么有时不生效
这不是写法错，而是它依赖父容器提供“可参照的宽度”。浏览器计算 max-width: 100% 时，会向上找第一个有明确宽度的祖先元素。常见失效场景：
- 父
<div> 没设 <code>width或max-width，比如只写了display: flex却没管它的宽度 - 父容器是 Flex 项，默认
min-width: auto，会阻止图片收缩（尤其在小屏上）——需显式加min-width: 0 - 外部 CSS 框架（如 Bootstrap）全局设置了
img { max-width: 100% }，但你又写了行内style="width: 500px"，导致冲突 - 用了
object-fit却忘了给容器设固定尺寸（width+height），此时object-fit完全不触发 - 给图片加
flex-shrink: 0仅在你确定它不该被压缩时用（比如图标） - 更通用的解法：给图片加
max-width: 100%+height: auto+align-self: center（垂直居中） - 如果父项是 Flex 子项，必须加
min-width: 0到该子项（不是图片上），否则max-width被忽略 - Grid 中同理，若图片在
grid-template-columns: 1fr 2fr里，也要确保该列轨道允许收缩（避免minmax(300px, 1fr)这类写法锁死最小宽度） -
srcset列的是图片源的**固有宽度**（单位w），不是显示宽度，例如"photo-800.jpg 800w" -
sizes必须和 CSS 中该图片所在容器的**实际占位宽度逻辑一致**，比如容器在小屏是100vw，中屏是50vw，就得写sizes="(max-width: 768px) 100vw, 50vw" - 漏掉
sizes，浏览器默认按100vw选图，大概率选大了；写错sizes（比如把50vw写成50%），会导致选图完全失准 - 开发时用 Chrome DevTools 的 Network → Filter → “Large resources” 查看是否真加载了合适尺寸的图，别信预览效果
-
object-fit: cover在 iOS 10 以下不支持，必须加-webkit-object-fit: cover；iOS 9 及更早连这个前缀都不认，只能换方案 - 用
background-image确实绕过兼容性问题，且支持background-size: cover+background-position精控，但它让图片脱离 DOM 流，无法被屏幕阅读器读取，也不能右键保存 - 真正需要 fallback 的场景（比如老 iOS + 必须语义化），推荐组合：先写
<img>+object-fit，再用媒体查询针对旧版 Safari 改为background-image+content: ""占位 - 注意
background-image的容器必须有明确宽高（height: 200px或aspect-ratio: 16/9），否则背景图不显示
Flex/Grid 布局中图片撑开容器怎么办
在 display: flex 或 display: grid 容器里，<img> 默认行为是“不收缩”，哪怕你写了 max-width: 100%，它仍可能按原始尺寸撑开父项。关键不是改图片，而是控制容器项的行为：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
要不要用 srcset 和 sizes
只做视觉缩放，不用；但只要上线，就该用——否则手机加载 4K 图，用户等三秒白屏，你还不知道问题在哪。
object-fit: cover 和 background-image 哪个更稳
要看图片是不是内容本身：<img> 承载语义（SEO、无障碍、打印）、background-image 只负责装饰。两者不能混用，但 fallback 时得心里有数：
最常被忽略的其实是 sizes 属性和 Flex 子项的 min-width 行为——这两处一错，图片要么糊，要么慢，要么布局崩，但错误不报在控制台，得靠肉眼比对 Network 面板和 computed styles 才能定位。
