img标签默认保持原始宽高比，但需避免同时设置固定width和height；最简响应式方案是max-width: 100%配合height: auto，确保父容器有明确宽度，防止变形与溢出。
img 标签本身不自动等比例缩放？先看默认行为
浏览器对 <img> 的默认渲染是「保持原始宽高比」，但前提是没强制设置 width 或 height 的具体像素值。一旦写了 width: 100%; height: 200px;，就会拉伸变形——这不是 bug，是 CSS 严格按声明执行的结果。
所以「等比例缩放」的本质，是让宽高至少有一边自由响应，同时阻止另一侧硬性截断或拉伸。常见错误是只设 width: 100% 却忘了清掉 height 的内联样式或旧 CSS 规则。
- 检查图片是否带
height属性（HTML 内联属性优先级高于 CSS） - 确保没有全局重置规则如
img { height: auto !important; }被意外覆盖 - 如果用 CMS 或富文本编辑器插入图片，它可能自动加了固定
height
用 max-width + height: auto 最简实现
这是兼容性最好、语义最清晰的方案，适用于绝大多数静态图、文章配图、卡片图。
img {
max-width: 100%;
height: auto;
}
原理：当容器变窄，max-width 触发限制，height: auto 强制浏览器按原始宽高比重新计算高度。注意不是 width: 100% ——后者在超大图上会撑破容器，而 max-width 是安全上限。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须配合父容器有明确宽度（比如
div { width: 80%; }或使用 flex/grid 布局） - 不适用于需要「固定宽高比容器 + 图片居中裁剪」的场景（如封面图），那是
object-fit的领域 - IE8+ 完全支持，无兼容性风险
需要固定宽高比容器时用 aspect-ratio + object-fit
比如卡片区域要求始终是 16:9，图片可能过宽或过矮，这时不能只靠 height: auto，得用现代 CSS 控制容器比例和图片填充方式。
.card-img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
aspect-ratio 让容器自己维持比例，object-fit: cover 让图片等比缩放并填满（可能裁剪）。若要完整显示且留白，改用 contain。
- Firefox 89+、Chrome 88+、Safari 15.4+ 支持
aspect-ratio；旧版需用 padding-top 技巧模拟 -
object-fit不改变图片原始尺寸，只影响渲染裁剪，所以仍需搭配width: 100%或max-width: 100% - 服务端未提供合适尺寸图时，
cover可能切掉关键内容，上线前务必视觉验证
srcset 和 sizes 配合才是真响应式
上面所有 CSS 方案都只是「缩放」，没解决「加载哪张图」的问题。大屏加载小图会模糊，小屏加载大图浪费带宽——这才是响应式图片的核心痛点。
<img
src="photo-small.jpg"
srcset="photo-small.jpg 480w,
photo-medium.jpg 1024w,
photo-large.jpg 1920w"
sizes="(max-width: 480px) 100vw,
(max-width: 1024px) 50vw,
33vw"
alt="描述">
srcset 提供多分辨率源，sizes 告诉浏览器「在不同断点下，这张图大概占视口多宽」，浏览器据此选最匹配的资源。不写 sizes 时，浏览器默认按 100vw 算，容易选错。
- 不要只依赖
srcset而忽略sizes，否则响应式失效 - 用 Chrome DevTools 的 Network → “Disable cache” + 切换设备，观察实际加载的是哪个文件
- WebP/AVIF 格式可进一步压缩，但需 fallback 到 JPG/PNG（用
<picture>）
等比例缩放本身很简单，难的是在缩放、裁剪、加载、格式、语义之间做取舍。尤其是 sizes 的表达式和真实布局宽度不一致时，图片加载质量会悄悄下降，这种问题往往上线后才被发现。
