img加width:100%无效主因是父容器无宽高或max-width:none覆盖；需设父级宽度、img用width:100%+height:auto，并排查样式冲突。
img 标签加 width: 100% 为什么没用？
直接写 width: 100% 但图片不缩放，大概率是父容器没设宽高或存在 max-width: none 覆盖。浏览器默认把 <img> 当作内联元素，若父级（比如 <div>）没明确宽度，100% 就失去参照。另外，某些 CSS 框架（如 Bootstrap）会全局设 img { max-width: 100% }，但如果你手动写了 width: 100% 又没清掉 height，可能触发拉伸变形。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保父容器有明确宽度（例如
width: 100%或max-width: 1200px） - 给
<img>同时设width: 100%和height: auto，防止失真 - 删掉可能存在的
height行内样式或 CSS 规则 - 检查是否被其他选择器的
max-width: none干扰（用浏览器开发者工具看 computed 样式）
响应式图片要不要用 srcset？
单纯让一张图随窗口缩放，srcset 不是必须的；但如果你在意加载性能和高清屏显示，它就绕不开。比如在 2x 屏上仍用 1x 图片，会模糊；小屏幕加载大图，又浪费带宽。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 基础自适应：只用
<img src="photo.jpg" style="width:100%; height:auto;"> - 兼顾清晰度和性能：用
srcset+sizes，例如：<img src="photo-400.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw"> - 注意
sizes值决定浏览器选哪张，不是硬性限制；不写sizes时浏览器默认按 100vw 选，容易误选大图
object-fit: cover 和 contain 有什么实际区别？
当容器宽高固定（比如卡片头图 height: 200px），而图片比例不一致时，object-fit 才真正起作用。它不改变图片原始尺寸，只控制“怎么塞进框里”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：等比缩放并裁剪，填满容器——适合封面图、头像，但可能切掉关键内容 -
object-fit: contain：等比缩放并留白，完整显示——适合产品图、图表，但上下/左右会有空白 - 必须配合
width和height显式设置容器尺寸，否则cover/contain无效 - 老版本 iOS Safari 对
object-fit支持差，需加-webkit-object-fit前缀，或用 background-image 替代
用 background-image 实现自适应更稳吗？
当图片只是装饰性内容（比如 banner 背景），不用 SEO 或无障碍考虑时，background-image 确实更可控：支持 background-size: cover、contain、渐变叠加，且不会因缺失 src 导致布局塌陷。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 语义化优先用
<img>；纯视觉装饰用background-image - 关键代码：
.hero-banner { background-image: url('banner.jpg'); background-size: cover; background-position: center; height: 300px; } - 注意：背景图无法被屏幕阅读器识别，也不能右键保存，也不参与页面内容流（比如不会撑开父容器高度，除非设了
height） - 如果要适配暗色模式，可结合
@media (prefers-color-scheme: dark)换背景图
