width: 100%单独使用会导致图片变形，因其强制拉伸宽度却忽略原始宽高比，高度不联动；而max-width: 100% + height: auto才是安全组合，前者限宽防溢出，后者按比例自动计算高度，且依赖父容器有明确宽度。
为什么 width: 100% 单独用会出问题
单独写 img { width: 100%; } 看似让图片填满容器，但实际会导致严重变形：浏览器会强制拉伸高度以匹配宽度，完全丢弃原始宽高比。更隐蔽的问题是，如果父容器本身没设宽（比如 <div> 没给 width 或 max-width），width: 100% 会退化成“尽可能撑开”，在小屏上直接溢出横向滚动条。
max-width: 100% + height: auto 是底线组合
这是所有现代响应式图片的起点，必须同时存在，缺一不可：
-
max-width: 100%：限制图片最大宽度不超过父容器，防止溢出 -
height: auto：告诉浏览器按原始比例自动计算高度，避免拉伸或压缩 - 父容器本身需有明确宽度（如
width: 100%或max-width），否则该规则无效
示例：
img {
max-width: 100%;
height: auto;
}移动端图片模糊？别只靠 max-width
高清屏（如 iPhone 的 Retina 屏）下，max-width: 100% 会让 1x 图片被放大渲染，出现锯齿。这时需要 srcset 和 sizes 配合：
立即学习“前端免费学习笔记（深入）”；
-
srcset提供多分辨率图源（如photo@2x.jpg、photo@3x.jpg） -
sizes告诉浏览器“这张图在不同视口下大概占多宽”，让浏览器选最匹配的资源 - 不加
sizes时，浏览器默认按 100vw 选图，可能选错尺寸
简单场景可先用：<img src="photo.jpg" srcset="photo@2x.jpg 2x" alt="">
图片容器本身也要响应式
再好的图片样式，也救不了一个固定像素宽的父容器。常见错误包括：
- 外层
<div>写了width: 375px—— 在 Pixel 8 上只占半屏 - 用了
padding: 20px却没换算成rem或%，小屏上内边距吃掉大量内容空间 - 容器没设
box-sizing: border-box，导致padding+width: 100%实际超宽
正确做法：容器用 width: 100% 或 max-width: 100%，内边距统一走 rem，并确保根字体大小已按屏幕动态设置（如 html { font-size: calc(16px * (100vw / 375)); }）
真正卡住人的不是单个 CSS 属性，而是图片、容器、viewport 元标签、根字体这四者没对齐。漏掉任意一环，都会在某个机型上突然失效。
