object-fit必须配合明确宽高才能生效，否则无效；常见错误是仅设object-fit而未给img或其父容器设width/height，导致尺寸塌陷或flex压缩，正确做法是显式设定尺寸或用aspect-ratio锁定比例。
只设 height 属性或 CSS height: 200px 必然拉伸变形——这不是 bug，是浏览器对替换元素的默认渲染逻辑。真正可控的“固定高度、宽度自适应”，必须绕过直接约束 img 本身，转而控制容器行为。
为什么 height: 200px + width: auto 不行
浏览器看到 height（无论是 HTML 属性还是 CSS）且未同步控制宽度时，会强制压缩/拉伸以满足该高度，完全忽略原始宽高比。尤其当图片源比例各异（比如 4:3 的产品图混着 1:1 的头像），单靠 height 就等于放弃比例一致性。
-
height="200"或height: 200px会让图片按像素值硬压，宽度保持原始尺寸，极易横向溢出 - 即使加了
width: auto，也无法抵消 height 强制缩放带来的失真 - 在 flex 容器中，
min-width: auto还会进一步阻止图片收缩，让问题更隐蔽
用 object-fit + 固定容器高度实现视觉固定高
这是目前最干净、语义最明确的解法：把图片放进一个有明确 height 和 width 的盒子，再用 object-fit 控制填充方式。图片本身不设宽高，只负责“怎么填满”。
- 父容器需显式设
height: 160px（或aspect-ratio: 16/9）、width: 100%，并加overflow: hidden防裁剪溢出 -
img设width: 100%; height: 100%，再加object-fit: cover（裁剪填满）或object-fit: contain（等比留白） - 老版 iOS Safari 需补
-webkit-object-fit: cover；IE 完全不支持，fallback 只能改用background-image+background-size，但会丢失alt和 SEO
flex/grid 容器里图片撑开布局怎么办
在 display: flex 或 display: grid 的子项中，img 默认带 min-width: auto，它会扛着原始宽度死守，导致容器被撑大，响应式断点失效。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 必须给
img加min-width: 0，这是关键一步，覆盖 flex 默认行为 - 同时保留
max-width: 100%和height: auto，确保基础缩放不崩 - 如果容器本身也要等比占位（如卡片图要求 16:9），优先用
aspect-ratio: 16/9，比旧式padding-top: 56.25%更简洁可靠
sizes 属性缺失导致 object-fit 看似生效实则加载错图
object-fit 只管“怎么显示”，不管“加载哪张”。如果你用了 srcset 却漏写 sizes，浏览器无法判断这张图在当前布局下实际占多宽，大概率选最大图下载——小屏也加载 2MB 的 1200w 版本，卡顿、耗流量。
-
sizes="(max-width: 768px) 100vw, 50vw"告诉浏览器：“小屏下图占满视口，大屏下只占一半” - 这个值必须和 CSS 中该图片容器的**实际显示宽度逻辑一致**，否则
srcset白配 - 检查 DevTools → Network 面板，看加载的是哪张图，再对照
sizes计算结果，最容易暴露误配
最常被跳过的其实是两件事：一是 flex 容器里忘了加 min-width: 0，二是 sizes 值写得和真实布局脱节。这两处一错，图片看着“好像能缩”，实则要么布局崩、要么带宽炸。
