图片变形因仅设width:100%而height未等比缩放；正确做法是max-width:100%+height:auto，并清除内联宽高属性，flex容器中还需加min-width:0。
img width=100% 为什么图片被拉变形了
因为只设 width: 100%，浏览器仍按原始宽高比渲染，但容器高度固定时，height 不会自动等比缩放——它被撑开或裁剪，取决于 overflow 或父容器约束。
真正要的是「等比缩放、不溢出、不拉伸」。核心不是靠 width 百分比，而是用 max-width + height: auto。
-
max-width: 100%：限制最大宽度不超容器，保留原始比例 -
height: auto：让高度随宽度等比变化，这是关键，不是可选 - 去掉
width和height内联属性（比如<img width="600" height="400">），否则会覆盖 CSS 的auto行为
img 在 flex 容器里不收缩怎么办
Flex 项目默认有 min-width: auto，会阻止 max-width: 100% 生效——图片死死卡在原始尺寸，哪怕容器变窄也不缩。
必须显式重置最小宽度：
- 给
img加min-width: 0（或min-width: unset） - 如果父容器是
display: flex，且子项是img，这个设置几乎必加 - 别依赖
flex-shrink: 1，它对替换元素（如 img）效果不稳定
响应式图片要不要用 srcset
srcset 不是「自适应」的替代方案，而是补充：它解决的是「不同设备像素比/视口宽度下加载合适分辨率图片」的问题，和 CSS 的缩放无关。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
两者该一起用：
- CSS 控制显示尺寸（
max-width: 100%; height: auto） -
srcset提供多张图源，比如<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w"> - 漏掉
srcset可能导致高清屏上图片发虚，或小屏加载大图浪费带宽
height:auto 在某些旧浏览器里失效
IE9–IE11 对 height: auto 在某些布局上下文（比如 table-cell、absolute 定位）中计算异常，图片可能塌成一条线或高度为 0。
兼容性兜底建议：
- 优先用
max-width: 100%+height: auto，现代浏览器全支持 - 若必须兼容 IE9–10，加一行
width: auto（IE 下有时需显式触发重绘） - 避免把
img放进display: table-cell或position: absolute后再指望height: auto准确工作
最常被忽略的一点：图片还没加载完成时，height: auto 会按 0 高度渲染，造成布局抖动。加 height 占位或用 aspect-ratio（现代方案）更稳。不过那是另一层问题了。
