最可靠方案是max-width: 100%; height: auto，浏览器按原始宽高比自动计算高度，无需js、不依赖原图尺寸；须避免同时设width/height、移除flex-shrink等干扰样式，并确保父容器有明确宽度限制。
直接用 max-width: 100% + height: auto 就行
这是最可靠、兼容性最好、也最不容易出错的方案。浏览器会根据图片原始宽高比自动推导高度，不会拉伸变形。你不需要知道原图尺寸，也不用 JS 计算比例。
常见错误现象：只写 width: 100%，结果图片被压扁或拉长；或者同时设了 width 和 height 的像素值，强制拉伸失真。
- 必须移除任何可能覆盖自动计算的样式，比如
height、min-height、flex-shrink: 1（在 flex 容器里尤其容易踩坑） - 父容器要有明确宽度限制，例如
max-width: 800px或width: 90%；否则width: 100%会让小图也被撑大 - 如果父容器是
display: flex，记得给img加flex-shrink: 0，否则它可能被压缩到 0
object-fit 不是等比缩放，是“怎么塞进框里”
当你已经给 img 设了固定宽高（比如 width: 300px; height: 200px），再用 object-fit 控制显示方式——它不改变图片原始尺寸，只决定裁剪或留白策略。
典型误用场景：把 object-fit: contain 当成响应式等比缩放方案，结果在小屏上图片缩得极小还带大片空白，或在 IE 中完全不生效（IE 不支持 object-fit）。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
object-fit: contain：完整显示，按比例缩放到能全放进框内，四周可能留白 -
object-fit: cover：填满框，按比例缩放后裁剪边缘，适合封面图 - 必须配合
display: block和明确的宽高设置才生效
高清屏模糊？srcset 得配对用
CSS 缩放不会提升像素密度。等比缩放后图片在 Retina 屏发虚，大概率是因为没提供高倍图源。
单纯用 max-width: 100% 缩放一张 1x 图，在 2x 屏上会被浏览器拉伸渲染，自然模糊。
- 基础写法：
<img src="a.jpg" srcset="a.jpg 1x, a@2x.jpg 2x"> - 更精准控制加载逻辑，加
sizes：sizes="(max-width: 768px) 100vw, 50vw" - 别用
background-image模拟等比缩放——它绕过alt、SEO、打印样式，屏幕阅读器也读不到
父容器没宽度限制，max-width: 100% 就会失效
这是最常被忽略的一点。如果父容器没有宽度约束（比如只是个空 div），width: 100% 会撑到 viewport 全宽，哪怕原图只有 100×100 像素，也会被强行拉大失真。
正确做法是让父容器本身有可预期的宽度上下限。
- 推荐写法：
<div style="max-width: 800px; margin: 0 auto;"><img style="max-width:90%"></div> - 用 Flex 或 Grid 布局时，确保容器设置了
width、max-width或flex-basis - 如果要用
aspect-ratio强制宽高比（如 16:9），注意它在 Safari 15.4+ 和 Chrome 88+ 才稳定支持，旧版需降级用 padding-top 技巧
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
