必须同时设置max-width: 100%、height: auto和display: block，否则图片仍会溢出或变形；因max-width依赖父容器宽度上下文，且单独使用不保宽高比、不防拉伸、不解决dpr模糊。
max-width: 100% 能让图片随屏幕宽度等比缩放，但**只写这一条几乎必然失效**——它依赖父容器的宽度上下文，且不保高宽比、不解决 DPR 模糊、不防拉伸变形。
为什么只加 max-width: 100% 图片还是溢出或变形
常见现象：小屏上图片撑破容器、被裁切、底部留白、或高度塌陷成一条线。根本原因不是属性写错了，而是缺少配套约束：
-
height: auto没加 → 浏览器按默认height: auto计算，但若父容器有display: flex或float未清空，height可能算错 -
display: block没加 →<img>是 inline 元素，底部会多出 4px 空隙，视觉上像“没缩放到位” - 父容器本身没宽度约束 → 比如外层是
position: absolute或flex未设flex-shrink: 0，此时max-width: 100%的百分比基准是“无意义的父宽”，不是视口 - 写了
width: 100%或height: 300px这类固定值 → 直接覆盖max-width的响应逻辑
移动端必须配齐的三行基础样式
这不是“建议”，是现代移动端图片自适应的最小可行组合：
img {
max-width: 100%;
height: auto;
display: block;
}
说明：
-
max-width: 100%：图片原始尺寸小于容器时保持原样；大于时才缩放，避免小图被拉糊 -
height: auto：强制浏览器按原始比例推算高度，防止压扁或拉高 -
display: block：干掉 inline 元素自带的基线对齐间隙，尤其在卡片、列表里效果明显
遇到固定尺寸容器（如 180×180 头像框）怎么办
这时 max-width: 100% 不够用——它只控宽度，不管容器高宽比是否匹配图片。你需要的是“内容适配容器”，不是“容器迁就图片”：
- 用
object-fit: cover+width: 100%; height: 100%：图片填满框，可能裁边，适合头像、海报 - 用
object-fit: contain+width: 100%; height: 100%：图片完整显示，居中，四周留白，适合文档截图、图表 - 旧版 Safari（≤ iOS 15.4）不支持
object-fit→ 改用background-image+background-size: cover/contain，把图片当背景塞进 div
高清屏（DPR=2/3）下图片模糊怎么破
max-width: 100% 只管布局缩放，不管像素密度。iPhone 上一张 400px 宽的图，在 retina 屏会被渲染成 800 物理像素宽，但源图只有 400 像素，结果就是模糊。
必须配合 HTML 的 srcset：
@@##@@
注意点：
- 不要只靠 CSS 缩放来“凑”高清效果，
width: 100vw+height: auto依然会糊 -
sizes属性可进一步优化加载，比如sizes="(max-width: 768px) 100vw, 50vw" - 构建流程里应生成多倍图，否则
srcset写了也没用
真正容易被忽略的，是 max-width: 100% 的“100%”到底参考谁——它不自动绑定视口，也不穿透 flex/absolute 布局链。你得亲手把宽度约束一级级传下去，或者直接用 max-width: 100vw 跳过父级依赖。否则，再多的 object-fit 和 srcset 都救不回一张错位的图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
