直接用 img 放进 li 里语义正确，但需设 width: 100%; height: auto; 重置 li 边距，图文混排时用 vertical-align 或 flex 对齐，响应式须配合 srcset/sizes，装饰图标优先用 background-image。
直接用 img 放进 li 里最简单，但不加控制会错位、溢出、响应失灵——关键不是“能不能放”，而是“怎么放才不破布局”。
列表项里直接嵌 img 的写法和坑点
把 img 当普通内联内容塞进 li 是语义正确、兼容性好、无障碍友好的做法。但它默认是内联替换元素，容易因原始尺寸撑开行高或破坏对齐。
- 必须设
img { width: 100%; height: auto; }，否则窄屏下图片不缩放，出现横向滚动条 -
li默认有上下 margin/padding，图文间距不可控，建议重置：li { margin: 0; padding: 0; } - 如果
li含文字+图片，图文基线默认对齐（vertical-align: baseline），导致图片底部悬空，加vertical-align: middle或top更稳 - 别在
img上写死height，否则等比破坏；如需固定容器高度，改用object-fit: cover+height: 100%
display: flex 控制列表项整体排列时的图片处理
当用 ul { display: flex; flex-wrap: wrap; gap: 8px; } 把列表项横排成网格，img 就不再是孤立元素，而要配合 flex 行为约束尺寸。
- 给
img加max-width: 100%和flex-shrink: 0，防止被 flex 压缩变形（尤其原始图宽远超容器时） - 若
li设了固定宽高（如卡片），img需配object-fit: cover填满且不拉伸 - 避免只靠
width: 33.333%控制图片宽度——flex 项默认min-width: auto，会阻止缩小，必须显式加min-width: 0 - 文字+图片组合时，用
display: flex; align-items: center;在li内部对齐，比依赖vertical-align更可靠
纯装饰性图标用 background-image 更轻量
如果列表前缀只是小图标（如箭头、圆点、状态标记），且无需被读屏器识别、不承载操作语义，background-image 比 img 更合适。
- 给
li加padding-left: 24px;，再设background: url(arrow.png) no-repeat left center / 16px; - CSS 中的 URL 路径相对于样式表文件位置，不是 HTML 文件——内联
style才按 HTML 位置解析 - 必须写
background-repeat: no-repeat，否则图标横向重复；background-position: left center确保居中对齐文字 - 无法加
alt，所以“删除”“编辑”这类有功能的图标仍得用img+ 合理alt
响应式图片加载与语义增强不能只靠 CSS
仅靠 width: 100% 缩放，手机仍会下载桌面尺寸大图，浪费带宽。真正适配需结合 HTML 层级能力。
- 用
srcset提供多分辨率源：
- 复杂场景（如不同视口下列数变化）配
sizes：sizes="(max-width: 768px) 100vw, 33vw"，让浏览器按容器宽度选图 - 若图片是内容核心（如商品图、数据截图），应包在
figure里，配figcaption，而非裸img - 所有
img必须有非空alt：图标类写功能（alt="展开详情"），内容图写描述（alt="红苹果特写，表皮光滑有光泽"）
最容易被忽略的是：flex 容器里 img 的 min-width: 0 和 flex-shrink: 0 组合，以及 srcset 和 sizes 的匹配逻辑——这两处一错，响应式就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
