img加width: 100%不生效因它是行内元素且依赖父容器可计算宽度；object-fit: contain留白全显，cover裁边填满；background-image影响SEO；srcset/sizes控制资源加载，三者缺一不可。
img标签加width: 100%为什么有时不生效
因为img默认是行内元素，父容器如果没有明确宽度或被其他样式撑开，width: 100%就失去参照——它不是“占满屏幕”，而是“占满父容器当前计算出的宽度”。常见于div没设宽、或者父级有display: flex但没配flex-shrink时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保父容器有可计算的宽度（比如
max-width: 800px，或width: 100vw） - 给
img加display: block，避免行内元素默认的底部留白干扰布局 - 若父容器是
flex，记得给img加flex-shrink: 0（否则可能被压缩到0）或改用flex: 1
object-fit: cover和contain的区别在哪
这两个值解决的是「图片尺寸与容器比例不一致」时的裁剪/拉伸逻辑，不是缩放本身，但直接影响视觉效果。很多人以为加了width: 100%就完事，结果图被拉变形或只显示局部，其实是没选对object-fit。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
object-fit: contain：完整显示图片，留白；适合头像、图标、需要全貌的场景 -
object-fit: cover：填满容器，可能裁边；适合封面图、轮播图等强调视觉冲击的场景 - 必须配合
width和height一起用（比如height: 200px），否则cover和contain无意义 - 注意兼容性：
object-fit在IE全系不支持，如需兼容，得用background-image方案替代
用background-image实现响应式图片的坑
当需要更精细控制（比如不同断点换图、模糊占位、渐进加载），background-image比img灵活，但它天生不参与文档流，也没有alt文本，SEO和可访问性会打折。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
background-size: cover或contain代替object-fit，但记得设background-position: center防偏移 - 响应式换图优先用
picture+source，而不是CSS媒体查询+background-image——后者无法让浏览器预加载 - 如果非要用
background-image，至少加上background-repeat: no-repeat和background-color占位底色，避免加载空白
srcset和sizes属性比纯CSS更可靠
CSS只能控制“怎么显示”，不能控制“加载哪张图”。用户用手机打开一个标着width: 100%的img，浏览器仍可能下载桌面尺寸的大图，浪费流量又拖慢首屏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
srcset提供多分辨率源：<img src="a-1x.jpg" srcset="a-1x.jpg 1x, a-2x.jpg 2x"> - 结合
sizes告诉浏览器不同视口下预期显示宽度：sizes="(max-width: 768px) 100vw, 50vw" - 不要只靠
width/height属性做响应式——它们只是HTML属性，不影响资源选择 - 现代项目可直接用
next/image（Next.js）或gatsby-image（Gatsby），底层已封装srcset+懒加载+占位逻辑
真正难的不是写几行CSS，而是搞清“缩放”背后分三层：资源加载（HTML）、尺寸计算（CSS）、渲染裁剪（object-fit）。漏掉任何一层，都会在特定设备或网络条件下露出破绽。
