应给图片设max-width:100%和height:auto，flex容器中图片设flex-shrink:0，文字区设min-width或flex-basis，文本容器加word-break:break-word和overflow-wrap:break-word，用aspect-ratio或padding-top预留高度，srcset提供多分辨率图并设loading="eager"。
大图宽度超出容器时文字被挤到下方
这是最常见的布局断裂——img 默认是行内元素，且不设 max-width 时会撑开父容器，导致右侧文字区块被迫换行。尤其在响应式容器（比如 display: flex 或 grid）里，只要图片原始宽度过大，Flex 项就可能溢出或压缩文字。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图片加
max-width: 100%和height: auto，强制它不超过父容器宽度 - 如果用
flex布局，确保图片容器设了flex-shrink: 0，否则 Flex 会主动压缩图片（反而失真） - 文字区域必须显式设最小宽度（如
min-width: 200px）或用flex-basis锁定基础尺寸，不然小屏下会被压成一行字
文字描述在不同屏幕下断行混乱
中英文混排、长商品名、无空格 SKU（如 "ABC-XYZ-2024V2"）会让 word-break 和 overflow-wrap 表现不一致：Chrome 可能正常换行，Safari 却卡住整行溢出，iOS WebView 更容易直接撑破容器。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对描述类文本容器统一加
word-break: break-word（兼容老版 Safari）+overflow-wrap: break-word（现代标准） - 避免只依赖
white-space: normal——它对连续无空格字符串无效 - 若内容含大量技术参数（如
"CPU: Intel Core i7-13700K"），可在冒号后加零宽空格，但仅限服务端渲染或构建时注入，不要靠 JS 动态插
图片加载完成前文字位置跳动
没设 height 或 aspect-ratio 的图片加载时高度为 0，文字先占满整行，图片一进来立刻把文字往下顶，用户看到明显“抖动”。这不是动画问题，是流式布局的固有缺陷。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
aspect-ratio: 4 / 3（支持 Chrome 88+/Firefox 89+）替代 JS 计算或 padding-top 剧本 - 不支持
aspect-ratio的旧环境，退化为padding-top: 75%+position: relative容器 + 绝对定位图片 - 禁止用
height: auto配合 JS onload 后重排——延迟触发会放大跳动感
高分辨率屏下大图模糊或加载过慢
src 只写一张 1200px 宽图，在 Retina 屏上会被拉伸渲染，边缘发虚；全用 srcset 又可能让低端设备多下几份图，首屏时间变长。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 至少提供两档：普通屏用
1200w，2x 屏用2400w，通过srcset+sizes="(min-width: 768px) 1200px, 100vw"控制 - 关键大图必须加
loading="eager"，别信默认 lazy —— 详情页首屏图不该等滚动才载 - WebP 格式 fallback 到 JPEG 要靠
<picture></picture>，但注意 iOS 13.4 以下不支持 WebP，得在构建时生成双版本并配好<source></source>type
真正难的不是写对某条规则，而是所有这些约束要同时生效：图片不能溢出、文字不能断错、加载不能跳、清晰度不能妥协——任何一个环节松动，用户第一眼看到的就是“这页面做得不认真”。
