直接给img设width:100%;height:100%是变形主因，因其强制填满容器而无视原始宽高比；正确解法是用object-fit（需配合明确宽高）或max-width:100%;height:auto兼顾比例与兼容性。
直接给 img 设 width: 100%; height: 100% 是变形主因，不是“没调好”，而是策略错了——得让图片自己决定怎么缩，而不是硬塞进框里。
为什么 width/height 100% 一定拉伸？
浏览器默认把 img 当作替换元素，width: 100%; height: 100% 会强制它填满容器，完全无视原始宽高比。哪怕容器是 400×200，一张 800×600 的图也会被压成 4:1 比例，人脸变宽、文字糊掉。
- 这不是图片质量或分辨率问题，是 CSS 缩放逻辑错误
-
height: auto或width: auto单独用只能保一维比例，另一维可能溢出或留白 - Flex/Grid 容器里加
align-self: center不解决拉伸，它只管位置，不管缩放
object-fit 是最直接的解法
object-fit 让图片在已有宽高框内“聪明地适应”，但前提是父容器必须有明确尺寸（比如 width 和 height，或由 Grid/Flex 轨道定义）。
-
object-fit: cover：等比缩放 + 裁剪，填满容器（适合封面、轮播图） -
object-fit: contain：等比缩放 + 完整显示，留白（适合图标、示意图） -
object-fit: scale-down：取none和contain中更小的尺寸，防放大模糊 - 必须搭配
width和height才生效，比如width: 100%; height: 200px;
响应式场景优先用 max-width + height: auto
当目标是“随容器变宽、不拉伸、不模糊”，这是最稳妥的通用写法，兼容性远超 object-fit。
-
max-width: 100%; height: auto;—— 图片最大不超父容器，高度自动按比例算 - 别用
width: 100%，否则小图会被强行放大，失真 - 在 Flex/Grid 项中，需额外设
flex-shrink: 0，否则父容器压缩时仍会挤变形 - 移动端常见坑：父容器
font-size或zoom影响计算，建议用rem或视口单位锚定
IE 兼容或语义弱化时改用 background-image
IE 完全不支持 object-fit，且某些 CMS/框架限制 img 标签结构时，背景图是务实替代。
background-image: url(...); background-size: cover; background-position: center;- 失去
alt、懒加载、SEO 语义，但控制力更强，裁剪焦点可配background-position - 需确保容器有明确宽高，否则背景图不渲染
- 用伪元素或额外
div承载背景，避免和内容流冲突
真正容易被忽略的点是：所有方案都依赖父容器尺寸可控。Grid 中用 auto 行高、Flex 里没设 min-height、或者图片外层 div 没撑开，都会让 object-fit 或 max-width 失效——先稳住容器，再调图片。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
