关键是要用语义化结构（如figure）包裹图片与说明，配合ol#result-list{list-style:none}、li{max-width:100%;overflow:hidden}、img{width:100%;height:120px;object-fit:cover;display:block}及aspect-ratio防跳动等组合策略，兼顾自适应、对齐、语义与可访问性。
搜索结果页里的图片必须随列表项一起自适应，不能撑破容器、不能错位、不能拉伸变形——关键不是单独调 img，而是把图片放进语义正确的结构里，再用 CSS 精准控制它的行为。
为什么直接给 img 设 width: 100% 会出问题
常见错误是只写 img { width: 100%; height: auto; }，但漏掉三个前提：
-
li容器没设max-width: 100%或overflow: hidden，导致长图横向溢出 - 图片在
ol或ul里被默认list-style或缩进干扰，尤其 IE 下左侧多出 40px 内边距 - 没限制图片高度，小屏下高度爆炸，或与标题/摘要比例严重失调
ol li img 的最小安全样式组合
必须显式覆盖浏览器默认行为，且不破坏语义。以下四行是底线配置：
ol#result-list {
list-style: none;
padding: 0;
margin: 0;
}
#result-list li {
padding: 12px 16px;
border-bottom: 1px solid #eee;
max-width: 100%;
overflow: hidden;
}
#result-list li img {
width: 100%;
height: 120px;
object-fit: cover;
display: block;
}
#result-list li:last-child {
border-bottom: none;
}
注意：height: 120px 不是硬编码，而是为对齐和防抖动设的基准值；若需响应式高度，可用 aspect-ratio: 4/3（Chrome 103+ / Firefox 110+ 支持），老版本 fallback 到固定高度。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
带图说（caption）时怎么避免换行错乱
figcaption 是块级元素，平铺在 li 里会强制占满一行，破坏搜索结果的流式结构。正确做法是包裹 + 控制显示模式：
- 每张图和对应说明必须包在
描述 -
figure设display: inline-block或display: flex，而不是让figcaption直接兄弟于img - 父容器（即
li）加font-size: 0消除 HTML 换行符间隙；figure内再设回正常字号 - 别用
float或position: absolute强行压位置——语义一乱，键盘导航和屏幕阅读器就失效
移动端窄屏下图片排版最容易被忽略的点
很多人测试只看桌面端，结果在 iPhone 上图片堆叠、文字被裁、点击热区错位。真正要卡死的有三处：
-
li必须设word-break: break-all，否则长 URL 或无空格文本会把图片容器顶宽，触发横向滚动条 -
img要加flex-shrink: 0（如果li是 flex 容器），防止小屏下被压缩成一条线 - 若结果项含 favicon 小图标，用
display: flex; align-items: center; gap: 8px对齐，别靠vertical-align: middle—— 后者在不同字体下基线不一致，容易上下跳动
最麻烦的其实是加载态：图片没出来前，li 高度塌陷，导致列表跳动。解决方案不是 JS 插占位图，而是用 aspect-ratio + loading="lazy" 组合，让浏览器提前预留空间。这个细节，90% 的搜索页都漏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
