图片自适应需统筹容器、内容流与视口约束三者关系，仅max-width:100%不够；必须配合height:auto、aspect-ratio、flex/grid对齐控制及响应式断点，才能防失真、错位与布局抖动。
图片自适应不是靠“设个 max-width: 100% 就完事”，真正卡住人的，是图文比例失衡、缩放后错位、小屏堆叠时图片跑偏、甚至加载时布局抖动。核心矛盾在于：你控制的是图片尺寸，但实际需要平衡的是「容器 + 内容流 + 视口约束」三者关系。
为什么 width: 100% 和 height: auto 还会出问题
单独写这两条看似合理，但在真实嵌套结构中极易失效：
- 父容器没设
max-width或overflow: hidden，图片撑破外层导致横向滚动 -
img是行内元素，默认有基线对齐（baseline）间隙，下方多出几像素空白，影响垂直节奏 - 如果父容器用了
flex但没设align-items: flex-start，图片可能被居中拉高，挤压文字行高 - 在
display: grid容器里，width: 100%会按网格轨道计算，而非内容区宽度，结果比预期窄
用 aspect-ratio 锁定图文比例不塌陷
当你要确保“文字旁排图片”在宽屏下不被拉扁、小屏下不被压扁，硬写 height 或 JS 计算都不可靠。现代方案是让容器自己记住比例：
- 给图片外层
div加aspect-ratio: 4 / 3（或按实际图源设），浏览器自动推导高度 - 配合
width: 100%和max-width: 600px，既响应又防过宽 - 图片本身只写
width: 100%; height: 100%; object-fit: cover;，避免拉伸变形 - 注意：Safari 15.4+、Chrome 88+ 支持，旧版需 fallback 到 JS 或 padding-top 技巧
图文并排时，Flex 容器必须显式控制对齐与换行
很多人把 img 和 p 放进 display: flex 就以为万事大吉，结果缩放后图片突然跳到下一行、文字被截断——问题出在没管好主轴和交叉轴行为：
- 加
flex-wrap: wrap，否则小屏时强行并排会溢出 - 设
align-items: flex-start，防止图片默认居中顶起文字 - 给文字侧加
flex: 1，图片侧设固定宽（如flex: 0 0 320px）或按比例（flex: 0 0 45%） - 关键：用
@media (max-width: 768px)把flex-direction改成column，并重置图片width: 100%，否则它仍按原 flex 基准占位
背景图自适应别碰 height: 100vh
如果你用 background-image 做首屏大图，height: 100vh 是最常见也最危险的写法：
- iOS Safari 地址栏收放会动态改变
vh值，造成页面“抽搐”或底部被切 - 安卓 Chrome 在桌面模式下
vh包含滚动条宽度，导致背景偏移 - 正确做法是用
min-height: 100vh+background-size: cover，再配background-attachment: fixed（慎用，iOS 性能差） - 更稳的方案：用
aspect-ratio容器 +background-image，高度由比例驱动，不受视口变化干扰
真正难的不是让图片变小，而是让它在任意缩放、任意设备、任意字体渲染差异下，始终和文字保持视觉节奏一致——这要求你放弃“图片尺寸思维”，转而构建“容器语义 + 比例锚点 + 流式边界”的三层控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
