max-width: 100% 和 height: auto 是响应式图片的基础：前者防溢出，后者保比例；缺一不可，否则会导致拉伸、模糊或空白；父容器宽度逻辑自洽才是关键。
img 元素加 max-width: 100% 和 height: auto 是基础底线
这两条 CSS 足以让图片随父容器缩放、保持原始宽高比、不拉伸不变形。缺一不可：max-width: 100% 防止溢出，height: auto 让浏览器按比例算高度。如果只写 width: 100%，浏览器会忽略原始比例强行拉宽；如果显式写了 height: 200px，就会直接压扁或拉长。
常见错误现象：
- 图片在小屏上横向滚动——父容器没约束宽度，
max-width: 100%失效 - 图片在大屏上撑满全宽、模糊——父容器宽度是
100%但没设max-width上限 - 图片底部多出空白——
img默认是inline元素，建议加display: block
父容器必须有可计算的宽度上下文
响应式图片不是“自己动”，而是“跟着父容器动”。如果父容器没有明确宽度（比如一个空 div），max-width: 100% 就会按视口宽度算，小图被放大变糊。
- 用
max-width: 1000px; margin: auto;替代width: 1000px，窄屏时自动收缩 - 子容器（如
.divbox3）改用width: 100%，继承父容器当前计算值 - 加
box-sizing: border-box，避免padding或border导致实际宽度超限
居中需要分层处理：水平 + 垂直 + 容器尺寸
仅靠图片样式无法垂直居中。关键在父容器是否提供“可居中的空间”：
- 水平居中：父容器设
text-align: center（img为 inline）或margin: 0 auto（img为 block） - 二维居中（含垂直）：父容器用
display: flex; justify-content: center; align-items: center; height: 100vh - 如果父容器高度不固定（如内容流式布局），不要硬设
height: 100vh，改用min-height: 100vh或依赖 padding-bottom 技巧
慎用 object-fit 替代原生缩放
object-fit: contain 或 cover 看似能“自动适配”，但它本质是裁剪/拉伸容器内图像内容，对普通 img 标签不如 max-width + height: auto 稳定。尤其在 Safari 旧版或某些安卓 WebView 中，object-fit 行为不一致，且会覆盖 alt 文本语义。
- 适合场景：
video、背景图、或明确需要裁剪的卡片头像 - 不适合场景：文章配图、产品图等需保留完整信息的内容型图片
- 若真要用，必须配合
width和height固定容器尺寸，否则object-fit无意义
真正容易被忽略的是：图片缩放效果是否稳定，80% 取决于父容器的尺寸逻辑是否自洽，而不是图片本身写了多少行 CSS。写完记得检查三层：容器有没有 max-width，子容器是否用百分比继承，图片是否还挂着固定 height 或 width。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
