图片变形的根本原因是浏览器缩放时未按原始比例约束尺寸，如强制设置width和height、仅用width:100%而忽略height:auto，或background-size设为100% 100%等非等比拉伸方式。
图片变形的根本原因，是浏览器在缩放时没按原始比例约束尺寸——要么强制设了width和height两个固定值，要么只用width: 100%却忘了配height: auto，又或者对background-size用了100% 100%这种非等比拉伸方式。
img标签用object-fit控制缩放行为
这是现代方案里最直接、语义最清晰的解法，专为<img>这类替换元素设计。它不改变图片本身尺寸，只决定内容如何“装进”你给的盒子。
-
object-fit: cover：等比缩放，填满容器，超出部分裁剪；适合封面图、头像，但得配合object-position（比如top center）避免关键内容被切掉 -
object-fit: contain：等比缩放，完整显示，留白由父容器背景色或background-color补上；适合证件照、图标等必须全显的场景 - 别用
fill——它就是拉伸变形的代名词，除非你明确要压扁/拉长 - 必须同时设置
width和height（或至少一个固定，另一个auto），否则object-fit不生效
背景图用background-size: cover或contain
当图片不需SEO、不需右键保存、也不用做响应式srcset适配时，转成background-image反而更可控。但注意：background-size: 100% 100%是变形元凶，auto默认值又容易在窄容器里只撑宽不控高。
- 优先选
background-size: cover，再用background-position微调裁剪焦点（比如center top保人脸，bottom保脚部） - 需要图全显就用
background-size: contain，但得接受上下/左右可能有空白 - 移动端 Safari 对
background-attachment: fixed支持差，加了容易闪动或错位，慎用 - 响应式断点里必须重设
background-size，桌面cover+center，手机竖屏改contain或cover+top
老浏览器兼容或简单布局用max-width + height: auto
IE11 及更早版本不支持object-fit，纯内容型页面（如文章插图）也常只需“别溢出+保持比例”这个最基本需求。
-
max-width: 100%确保不突破父容器，height: auto让浏览器按原始宽高比算高度 - 别写
width: 100%; height: 200px——这等于告诉浏览器“不管原图多瘦多胖，都给我压成200px高”，必然变形 - 如果容器本身高度固定（比如卡片
height: 150px），那必须用object-fit或背景图方案，max-width救不了
响应式比例容器用aspect-ratio或padding-top技巧
当你不能靠图片自身尺寸撑开容器（比如轮播图、视频封面），而又要保证容器始终维持16:9或4:3这类比例时，光靠img样式不够，得从容器下手。
-
aspect-ratio: 16 / 9是最简洁的现代写法，Chrome 88+、Firefox 89+、Safari 15.4+ 都支持，直接写死比例，不用JS - 兼容旧版可走
padding-top方案：容器设position: relative，子img设position: absolute; width: 100%; height: 100%，再给容器加padding-top: 56.25%（16:9对应值） - 这两种方法都要求图片本身用
object-fit: cover或contain来适配，否则会拉伸或留黑边
真正容易被忽略的不是哪个属性好用，而是「同一张图在不同设备上，cover裁哪、contain留多少白、甚至aspect-ratio是否被支持」——这些都不是一次设完就完事的，得结合真实设备截图、用户反馈和具体业务目标反复调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
