max-width: 100% 让图片在不超父容器前提下保持原尺寸和宽高比，配合 height: auto 避免变形；display: block 消除 inline 元素默认基线对齐导致的底部空白；object-fit 不替代 max-width，而是用于固定容器内的内容裁剪；高清屏模糊需 srcset 提供多倍图而非 CSS 缩放。
为什么 max-width: 100% 能让图片自适应容器
因为 max-width: 100% 不是“强制拉伸”，而是“最多占满父容器宽度”，图片原始尺寸仍保留；配合 height: auto，浏览器会按原始宽高比自动计算高度，避免变形。
常见错误现象：width: 100% + height: auto 看似一样，但一旦图片原始宽度小于容器，它会被强行撑满——失真、模糊、细节糊成一片。
-
max-width: 100%只在图片原宽 > 容器宽时生效，否则保持原尺寸 -
height: auto是关键，缺了它，高度可能塌缩为 0 或继承默认值 - 不加
display: block时，img默认是 inline 元素，底部会有空白间隙（行内基线对齐导致）
必须加 display: block 吗
不是“必须”，但绝大多数场景下不加就会出视觉错位——尤其当 img 在 div 里单独一行时，底部多出几像素空白，像被往下踢了一脚。
原因：inline 元素按 baseline 对齐，而图片底部默认对齐文本基线，留出 descender 空间（比如字母 g、j 的下延部分）。display: block 切断这个上下文，空白消失。
- 替代方案有：
vertical-align: top/middle/bottom、font-size: 0在父容器上、或用line-height: 0 - 但
display: block最直接、兼容性最好（IE8+ 都支持） - 如果图片是链接（
a包着img），display: block也方便点击区域扩展
object-fit 能替代 max-width 吗
不能替代，是不同用途： max-width: 100% 解决“尺寸不超过容器”，object-fit 解决“内容如何填充容器”。两者常一起用，但混淆会导致意料外裁切或留白。
典型误用：img { width: 100%; height: 200px; object-fit: cover; } —— 这时 max-width 已失效，图片被强制拉到 200px 高，再裁切，响应性丢失。
- 要保持响应式缩放 + 控制裁切，写法是：
max-width: 100%; height: auto; object-fit: contain;（需同时设height为具体值才生效，所以通常不用） - 真正需要
object-fit的场景是固定宽高的容器（如卡片头图），此时max-width: 100%失效，得靠object-fit+width/height显式控制 -
object-fit在 IE 中完全不支持，max-width: 100%+height: auto是更稳妥的兜底方案
移动端高清屏（dpr > 1）下图片模糊怎么办
max-width: 100% 本身不解决像素密度问题。它只是缩放 CSS 像素，但若原图分辨率低，放大后就糊——这是资源问题，不是样式问题。
错误思路：用 transform: scale(0.5) 强制缩小再放大来“骗”清晰度，结果是更糊，且触发重绘开销。
- 正确做法是提供多倍图：
srcset配合sizes，让浏览器按 dpr 和视口选最合适的资源 - 例如：
- 如果用背景图，可结合
@media (-webkit-min-device-pixel-ratio: 2)切换background-image
响应式图片缩放的边界其实很清晰：样式管布局缩放，资源管像素精度。混在一起调，只会越调越糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
