图片变形主因是absolute搭配错误尺寸控制，正确解法是容器设明确宽高或aspect-ratio，图片用object-fit+object-position；旧浏览器可用transform居中+max-width/max-height；装饰图优先background-image。
图片变形不是因为position: absolute本身，而是它常被搭配错误的尺寸控制方式——比如只设width: 100%却不约束高度，或用top/left硬拉伸导致拉扯失真。核心解法是把尺寸控制权交给object-fit和容器约束，而非靠定位“拽”图片。
为什么absolute图片一设宽高就拉伸/压扁？
常见于这种写法：img { position: absolute; width: 100%; height: 100%; }。此时浏览器强制把原图塞进容器，不管比例，必然变形。
- 根本原因是
height: 100%在absolute上下文中依赖父容器高度，而父容器若没明确高度（如height: auto），该100%可能退化为内容撑开高度，但图片又没按比例缩放 -
width: 100%+height: auto组合在absolute里无效：脱离文档流后，auto无法正确继承原始宽高比 - 用
top/bottom/left/right四边拉伸（如top: 0; bottom: 0; left: 0; right: 0）等同于强制铺满，同样无视原始比例
用object-fit + 固定容器尺寸彻底解决
必须同时满足两个条件：容器有可预测的宽高，图片用object-fit控制内部缩放逻辑。
- 给图片父容器（
position: relative）设明确宽高，或用aspect-ratio锁定比例，例如：div { width: 100%; aspect-ratio: 16 / 9; } - 图片自身只需：
img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }——cover保持比例并裁切，contain保持比例并留白 - 务必加
object-position控制焦点，比如object-position: center center防人脸被裁掉；若需左上角对齐，写object-position: 0 0 - 避免混用：
max-width: 100%或max-height: 100%在absolute里基本失效，别加
居中且不裁切的兼容写法（旧浏览器 fallback）
当object-fit不可用（如IE），可用绝对定位+自身尺寸锚点实现安全居中，不依赖父容器高度。
- 结构：父容器
position: relative，图片position: absolute - CSS：
img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; } - 关键点：
transform基于自身宽高，缩放时稳定；max-width/max-height确保不溢出，且保留原始比例 - 注意：不能同时写
width: 100%和max-width: 100%，后者会被前者覆盖；优先用max-系列
容易被忽略的细节：background-image vs ![]()
标签的选择
如果只是展示装饰性图片，background-image往往比<img>更可控——它天然支持background-size: cover和background-position，且不受position: absolute尺寸陷阱影响。
- 但
background-image无法设置alt、不参与语义化、SEO弱，纯装饰图才推荐 - 若必须用
<img>，且需响应式+不变形，object-fit是现代标准答案，别试图用padding-top百分比占位再background-image模拟——那绕远了 - 真正麻烦的是混合场景：比如
background-image做底图，上面叠position: absolute的<img>图标——这时两者的缩放基准必须一致，否则一缩放就错位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
