用 max-width: 100% + height: auto 实现响应式图片，避免拉伸变形；需父容器有明确宽度，配合 object-fit 处理裁剪需求，并用 srcset 或 image-set() 适配 Retina 屏。
图片超出容器怎么办：用 max-width: 100% 而不是 width: 100%
直接设 width: 100% 会让小图被强行拉伸变形，尤其在移动端；max-width: 100% 才是响应式图片的起点——它只限制上限，不强制放大。
常见错误现象：img 在窄屏上溢出父容器、横向滚动条出现、图片模糊（因被拉伸）。
- 必须配合
height: auto，否则高度不会随宽度等比缩放 - 父容器需有明确宽度（比如
width: 100%或max-width: 600px），否则max-width: 100%没参照系 - 不要给
img设固定height，会破坏宽高比
为什么 height: auto 不可省略
height: auto 是让浏览器按原始宽高比自动计算高度的关键。省略后，大多数浏览器会把 height 当作 auto，但某些旧版 Safari 或设置了 vertical-align 的场景下，可能渲染出意外间隙或错位。
使用场景：图文混排、卡片内嵌图、CMS 输出的未加 class 的原生 img 标签。
- 如果父元素是 Flex 布局，还需注意
align-items: flex-start可能导致图片底部留白，此时加vertical-align: top更稳 - 在 CSS Grid 中，
height: auto依然有效，但若网格轨道设了min-height，图片仍会被撑高
Retina 屏和高清图怎么适配
max-width: 100% + height: auto 解决的是布局缩放，不解决像素密度问题。高清图需要额外手段，否则在 Retina 屏上会发虚。
常见错误现象：图片在 iPhone 上看着模糊，开发者工具里发现实际渲染尺寸是 CSS 像素的 2 倍，但图源只有 1x 分辨率。
- 优先用
srcset="photo@2x.jpg 2x" - 单图场景可用
image-set()（CSS，但兼容性有限，Safari 16.4+ 才支持） - 后端生成多尺寸图时，确保
srcset中的宽度描述符（如400w）对应真实图宽，而非 CSS 宽度
遇到 object-fit 别乱套：先分清是“缩放”还是“裁剪”
很多开发者看到图片变形就立刻加 object-fit: cover，结果内容被切掉。其实 object-fit 和 max-width 解决的是不同问题：max-width 控制布局尺寸，object-fit 控制图内像素如何填满该尺寸。
使用场景：头像圆角裁剪、Banner 图全屏铺满、图标居中显示。
-
object-fit: contain保持比例并完整显示，适合文档插图 -
object-fit: cover保持比例但可能裁边，适合封面图——但必须确保关键内容在中心安全区 - 用了
object-fit后，height必须显式设置（不能靠auto），否则没效果
事情说清了就结束。最常被忽略的一点是：所有这些规则对 div 的 overflow: hidden 或 transform）意外截断或重置渲染上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
