CSS属性max-width功能疑问：百分比取值规则与响应式适配原理

问题1：max-width: 100%的取值逻辑 #

你的理解是完全正确的，当给图片设置max-width: 100%且包含块为body时，该属性的计算值确实等于当前body的内容宽度。
容易出现的认知混淆点是max-width是宽度上限值，而非强制元素必须达到的宽度值：如果图片本身的原始宽度小于当前body宽度，图片会以原始尺寸渲染；只有当图片原始宽度大于body宽度时，才会被限制到和body同宽。

问题2：max-width实现响应式图片的原理 #

这个效果和img作为替换元素的默认渲染规则、max-width的约束优先级直接相关，不存在特殊机制，属于基础规则的组合效果：

• 仅设置width: auto; height: auto时，图片会完全按照自身原始尺寸渲染，哪怕窗口缩小到比图片宽度更小，图片也会直接溢出容器，不会自动缩小——因为没有任何规则限制它的宽度上限。
• 当增加max-width: 100%配置后，相当于给图片新增了一条高优先级约束：图片的实际渲染宽度取「自身原始宽度」和「包含块宽度」两个值中的较小者。当你缩小窗口时，作为包含块的body宽度同步变小，一旦body宽度小于图片原始宽度，图片的实际渲染宽度就会被强制调整为当前body宽度，同时浏览器默认会保持图片的原始宽高比自动计算高度，自然就实现了跟随窗口尺寸缩放的效果。
  如果希望图片不管原始尺寸多大都能拉满容器宽度，可以额外增加width: 100%配置即可。

内容的提问来源于stack exchange，提问作者Mysa