应使用object-fit: cover或contain，但必须配合容器显式宽高；仅设img的width/height（含内联属性）必致拉伸变形，因浏览器会强制按设定值缩放而忽略原始比例。
直接结论：用 object-fit: cover 或 object-fit: contain，但必须配合显式容器宽高；只改 <img alt="HTML怎么让图片自适应填充而不产生拉伸挤压" > 自身的 width/height CSS 属性或内联属性，一定会拉伸。
为什么 width: 100%; height: 100% 会让图片变形
浏览器对 <img alt="HTML怎么让图片自适应填充而不产生拉伸挤压" > 的默认行为是：只要同时设了宽和高（无论属性还是 CSS），就按这两个值强行缩放，完全忽略原始比例。这不是 bug，是规范行为。
-
<img src="a.jpg" style="max-width:90%" style="max-width:90%" alt="HTML怎么让图片自适应填充而不产生拉伸挤压" >→ 原图哪怕 4000×3000，也会被压成 300×200 -
img { width: 100%; height: 200px; }→ 宽度随父容器变，高度钉死，比例必然崩坏 - 即使只写
height: 200px，宽度仍保持原始像素值，不缩放，大概率溢出或错位
object-fit: cover 和 contain 的实际区别与选用场景
object-fit 不是“让图片自适应”，而是“让图片按指定容器框来填充”。它只在容器有明确 width 和 height（或 aspect-ratio）时才生效。
-
object-fit: cover：等比缩放后裁剪，填满整个容器 —— 适合封面图、头像、卡片图 -
object-fit: contain：等比缩放后完整显示，留白是设计结果 —— 适合产品图、示意图、文档插图 -
object-fit: fill：强制拉伸填满 —— 一般不用，就是你想要避免的“拉伸挤压” - 老版 iOS Safari（≤14.5）需加
-webkit-object-fit: cover前缀
Flex/Grid 容器中图片撑开父项怎么办
在 display: flex 或 display: grid 里，<img alt="HTML怎么让图片自适应填充而不产生拉伸挤压" > 默认带 min-width: auto，会拒绝收缩，哪怕你写了 max-width: 100%。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 错误做法：只给
<img alt="HTML怎么让图片自适应填充而不产生拉伸挤压" >加flex-shrink: 0（这反而锁死它不缩） - 正确做法：给图片的**父 Flex/Grid 子项**（不是图片本身）加
min-width: 0 - 如果图片在
grid-template-columns: minmax(300px, 1fr)里，300px 会卡死最小宽度，换成minmax(0, 1fr)才允许收缩 - 容器要设
width和height（或aspect-ratio），否则object-fit不触发
要不要删掉 img 的内联 width/height 属性
要删。内联 width 和 height 属性会覆盖 height: auto，导致等比缩放失效。
- HTML 中写
<img src="x.jpg" style="max-width:90%" style="max-width:90%" alt="HTML怎么让图片自适应填充而不产生拉伸挤压" >→height: auto直接被无视 - 现代构建工具（如 Vite、Webpack）可配
html-loader自动移除，或用脚本批量清理 - 若必须保留（如 SSR 场景），CSS 中强制覆盖：
img[width] { width: auto !important; }+img[height] { height: auto !important; } - 别依赖
srcset/sizes来“修复”拉伸 —— 它们只控制加载哪张图，不影响渲染逻辑
真正卡住人的从来不是 object-fit 写不对，而是容器没宽高、父项锁死最小宽度、或者内联属性还在后台偷偷生效。这些地方漏一个，图片就照常拉伸。
