图片width:100%失效主因是父容器无明确宽度或图片处于内联上下文；需设父容器宽、图片display:block、height:auto，并用object-fit等比缩放。
图片和文字在同一行时，width: 100% 不生效？
常见于卡片、列表项中图片左/右置、文字环绕的布局。直接给 <img> 设 width: 100% 没用，是因为父容器没设宽，或图片被包裹在未设 display: block 的内联元素里。
- 确保图片父容器有明确宽度（如
max-width: 300px或flex-basis），且非content-fit类型的弹性上下文 - 图片本身加
height: auto防止拉伸变形；若需等比缩放，优先用object-fit: contain或cover - 避免用
<img>套<a>再套<div>多层嵌套——每层都可能引入默认inline行为或margin干扰尺寸计算
flex 布局下文字撑开容器导致图片被压缩？
当 display: flex 容器中同时放图片和文字，默认 flex-shrink: 1 会让图片缩小以让位给长文本，尤其在小屏上明显失真。
- 给图片容器（不是
<img>本身）设flex-shrink: 0，锁定其不收缩 - 文字区域用
min-width: 0+overflow: hidden+text-overflow: ellipsis控制溢出，而非依赖图片让步 - 慎用
flex: 1直接写在图片上——它等价于flex: 1 1 0%，flex-basis: 0%会清空原始尺寸，图片失去参照
响应式图片配合文字时，srcset 和 sizes 怎么配才不白写？
只写 srcset 不写 sizes，浏览器无法判断「当前容器多宽」，只能按视口宽度粗略选图，常导致小屏加载大图。
-
sizes必须匹配 CSS 中图片所在容器的宽度逻辑，例如：sizes="(max-width: 768px) 100vw, 300px"对应 CSS 中该图片父容器在移动断点下占满视口、桌面下固定 300px - 文字流式排版时，图片容器宽度可能是
calc(50% - 10px)这类表达式，sizes就得手动换算成近似值（如(max-width: 768px) 48vw），不能指望浏览器自动解析 CSS 计算值 - 搭配
<picture>时，每个<source>的media要和实际断点一致，别把min-width: 769px写成min-width: 768px，和 CSS 断点错开 1px 就可能漏切
文字垂直居中对齐图片顶部/底部时，vertical-align 失效？
这是内联元素的老问题：vertical-align 只对 inline 或 table-cell 生效，而现代布局常用 flex 或 grid，此时再设 vertical-align 完全无效。
立即学习“前端免费学习笔记（深入）”；
- 确认图片和文字是否同属一个
display: inline上下文（比如都在<span>里）；否则改用align-items: center（flex）或align-self: center（grid） - 如果必须用内联布局（如富文本编辑器输出），图片加
vertical-align: middle后，文字需是单行且行高稳定；多行文字要额外包一层<span>并设相同line-height和vertical-align - 注意字体度量差异：不同字体的
baseline位置不同，同一行混用font-family会导致看似“对不齐”，这不是 CSS 错，是字体本身设计决定的
图片与文字自适应的核心不在“怎么缩”，而在“谁让谁”——是文字让出空间，还是图片主动适配，取决于容器约束力是否明确、弹性规则是否被意外覆盖。最容易被忽略的是：CSS 中看似无关的 box-sizing、padding 或父级 overflow，都会悄悄改变可用宽度，让所有自适应计算失效。
