应使用 CSS 控制图片尺寸以避免失真：优先用 max-width: 100%; height: auto; 实现响应式等比缩放；需固定宽高比时可用 aspect-ratio（注意兼容性）；高清屏与流量优化须配合 srcset 和 sizes。
直接用 width 和 height 会失真，别这么干
html 里写 <img src="x.jpg" style="max-width:90%" style="max-width:90%" alt="html插入图片怎么变小_html插入图片怎么按比例调整尺寸【方法】" > 看似简单，但浏览器会强行拉伸图片，导致变形。尤其当原图宽高比不是 2:1 时，人眼一眼就能看出脸被压扁或拉长。
- 老式属性
width/height是“强制像素值”，不保比例 - 现代页面基本都用 CSS 控制尺寸，HTML 属性只该用于提供原始宽高（比如做响应式占位）
- 如果必须用内联样式，优先写
style="width: 200px; height: auto;"——auto是关键
max-width: 100% 是响应式图片的底线配置
这是让图片在容器变窄时不溢出、同时保持比例最稳妥的一行 CSS。几乎所有现代项目都默认加这一句，不是可选项，是防错刚需。
- 单独写
max-width: 100%就够了，不用配height，浏览器自动算 - 它只限制“最大宽度”，小图不会被放大，大图会被等比缩小
- 如果父容器用了
display: flex或grid，可能需要额外加flex-shrink: 0防止被压缩到 0 - 示例：
@@##@@
想精确控制宽高比？用 aspect-ratio，但得看浏览器
aspect-ratio 是 CSS 新属性，能直接声明“我要 16:9”或“4:3”，浏览器自动维持比例，哪怕内容加载中也不塌陷。但它在 Safari 15.4+ 和 Chrome 88+ 才稳定支持。
- 写法：
style="aspect-ratio: 16 / 9; width: 100%;"，height不用设 - 兼容 fallback 方案：外层包个容器，用 padding-top 百分比做占位（经典“padding hack”）
- 注意：如果图片本身分辨率极低，强行撑大仍会模糊，
aspect-ratio不解决画质问题
srcset + sizes 不是“高级技巧”，是高清屏和流量敏感场景的必需项
用户手机开 2x 屏幕，你只给 1x 图片，就会模糊；用户用 4G 流量刷网页，你塞一张 3MB 的桌面图，体验直接崩。这两个属性就是为这事生的。
-
srcset列多个图源，比如photo-400w.jpg 400w, photo-800w.jpg 800w -
sizes告诉浏览器“在不同视口下，这张图大概占多宽”，比如(max-width: 768px) 100vw, 50vw - 浏览器自己选最匹配的图下载，不靠 JS，不阻塞渲染
- 漏掉
sizes，srcset很可能退化成只用第一张图
