响应式图片不缩放需确保应用img-fluid类并避免样式冲突。应检查是否被内联样式或!important覆盖，确认父容器有宽度约束，且必须同时设置max-width:100%和height:auto以维持宽高比。
响应式图片在 CSS 框架（如 Bootstrap）中不缩放，通常是因为图片未正确应用响应式样式，或被其他 CSS 规则覆盖。核心解决方式是确保图片宽度随容器变化，同时保持宽高比。
确认使用了正确的响应式类
Bootstrap 4/5 中推荐使用 img-fluid 类，它内部已定义：
max-width: 100%; height: auto;
这能防止图片溢出父容器，并自动等比缩放。
- 写法示例：
<img src="photo.jpg" class="img-fluid"> - 注意：不要和
width: 100%或固定像素宽高混用，否则可能破坏等比缩放 - 若用的是其他框架（如 Tailwind），对应类可能是
max-w-full h-auto
检查是否有冲突的 CSS 覆盖
即使加了 img-fluid，也可能被更高优先级样式覆盖，比如：
- 内联 style 设置了
width: 300px或height: 200px - 自定义 CSS 中写了
img { width: auto !important; }之类重置规则 - 父容器设置了
overflow: hidden但图片未设height: auto，导致拉伸变形
建议用浏览器开发者工具检查计算后的 computed styles，看 max-width 和 height 是否生效。
确保父容器有明确宽度上下文
响应式图片依赖父容器宽度来缩放。如果父容器本身没有宽度限制（例如脱离文档流、浮动未清除、或 flex 容器未设 flex-shrink: 1），图片可能无法正常收缩。
立即学习“前端免费学习笔记（深入）”；
- 常见场景：图片放在
<div class="row">内但没套col-*列类 - 修复方法：给图片外层加一个有宽度约束的容器，如
<div class="col-md-8"><img class="img-fluid"></div> - 纯 CSS 方案：给父容器设
width: 100%或max-width: 100%
需要强制等比缩放时补充 height: auto
仅设 max-width: 100% 不够，必须搭配 height: auto 才能维持原始宽高比。否则可能出现高度塌陷或拉伸。
- 自定义样式写法：
img { max-width: 100%; height: auto; } - 避免写
height: 100%或width: 100%单独使用，会破坏比例 - 如需裁剪显示（如头像），改用
object-fit: cover+ 固定宽高容器
