object-fit本身不防止变形，仅控制图片在已有盒子中的缩放或裁剪方式；真正防止变形的前提是容器必须有明确、可计算的宽高或aspect-ratio，否则cover/contain均失效。
用 object-fit 控制图片在固定容器内不拉伸
图片塞进固定宽高的 <div> 或卡片后变形，本质是浏览器默认把图片当普通块级元素拉满容器。解决的关键不是调 width/height，而是告诉浏览器“怎么适配”。
最直接有效的方式是给图片加 object-fit CSS 属性：
-
object-fit: cover—— 保持宽高比，裁切溢出部分（类似背景图的background-size: cover） -
object-fit: contain—— 保持宽高比，完整显示，留白（适合头像、图标等需全貌的场景） - 避免用
fill（默认值），它就是导致拉伸的元凶
注意：必须配合显式宽高设置（如 width: 200px; height: 150px;），否则 object-fit 不生效。容器本身也要有尺寸约束，不能靠内容撑开。
为什么不用 img 的 width 和 height 属性硬设
直接写 <img src="x.jpg" width="200" height="150"> 看似简单，但会强制按比例缩放像素，破坏清晰度，尤其在高清屏上模糊；更严重的是，它完全忽略原始宽高比，只要数值不匹配就必然拉伸。
立即学习“前端免费学习笔记（深入）”；
现代写法应剥离尺寸控制与语义：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- HTML 中只保留语义：去掉
width/height属性，或仅用它们设最大限制（如width="100%"） - 尺寸和适配逻辑全部交给 CSS，用
max-width+height: auto保比例，或用object-fit配合固定容器 - 如果需要响应式，优先用
max-width: 100%+height: auto，而不是固定像素
遇到 object-fit 不生效？检查这三点
常见失效不是代码写错，而是被其他规则覆盖或前提缺失：
- 父容器没设
width和height（或min-height），object-fit失去参照系 - 图片被设置了
display: block以外的值（比如inline），某些旧版浏览器下行为异常；稳妥起见加一句display: block - CSS 优先级冲突，比如外层框架样式（如 Bootstrap）重置了
img样式，用浏览器开发者工具检查 computed 样式，确认object-fit确实生效
兼容性方面：object-fit 在 IE 完全不支持，Edge 16+、Chrome 36+、Firefox 36+ 均可用；如需兼容 IE，得用 background-image 替代 <img>，并配 background-size。
用 background-image 替代 <img> 的适用场景
当图片纯属装饰、无需 SEO 或无障碍访问（如 banner 图、卡片底图），background-image 反而更可控，且天然支持 background-size 和 background-position。
示例写法：
.card {
width: 300px;
height: 200px;
background-image: url('photo.jpg');
background-size: cover;
background-position: center;
}
注意：background-image 无法被屏幕阅读器识别，也不能右键保存，也不参与文档流——所以内容型图片（如产品图、信息图）绝不能这么用。
真正难的不是选哪个方案，而是分清这张图到底属于「内容」还是「装饰」；混淆这两者，再对的 CSS 也会埋下可访问性或维护隐患。
