图片默认按原始尺寸渲染易撑破容器，应设width:100%和height:auto并配合flex布局、srcset适配高清屏、box-sizing:border-box及gap控制间距。

img 标签没设 width 和 height 会撑破容器

直接把 <img alt="HTML怎么让列表图片自适应各种设备屏幕" > 放进 <ul></ul> 或 <li> 里，不加任何样式时，图片默认按原始尺寸渲染。在小屏上就会横向溢出，触发滚动条或破坏布局。

解决办法是强制约束宽度，同时保留宽高比：

• 给 <img alt="HTML怎么让列表图片自适应各种设备屏幕" > 加 width: 100% 和 height: auto，让它随父容器缩放
• 确保父级（比如 <li>）有明确的宽度限制，例如 max-width: 100% 或用 flex/grid 控制
• 避免同时设 width 和 height 固定值，否则会拉伸变形

ul/li 布局用 display: flex 更可控

传统浮动或 inline-block 做图列表，在响应式下容易换行错位、间隙难控。flex 布局能自动处理对齐、换行和空间分配。

示例结构：

立即学习“前端免费学习笔记（深入）”；

<ul class="image-list">
  <li><img src="a.jpg" alt=""></li>
  <li><img src="b.jpg" alt=""></li>
</ul>

对应 CSS：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• .image-list 设 display: flex + flex-wrap: wrap
• .image-list li 设 flex: 1 1 200px（最小宽度 200px，可伸缩）
• .image-list img 设 width: 100% + height: auto + display: block（防底部空白）

需要适配高清屏就得用 srcset

只靠 CSS 缩放会让图片在 Retina 屏上模糊。必须提供多倍分辨率资源，由浏览器按设备像素比选择。

关键不是“写一堆尺寸”，而是按实际使用场景配：

• 如果 <li> 在小屏占满宽度（~375px），就提供 375w、750w 两档
• 用 srcset 列出不同宽度的图片，用 sizes 告诉浏览器“这个 <img alt="HTML怎么让列表图片自适应各种设备屏幕" > 在视口里大概占多宽”
• 例如：<img src="a-375.jpg" srcset="a-375.jpg 375w, a-750.jpg 750w" sizes="(max-width: 768px) 100vw, 50vw" alt="HTML怎么让列表图片自适应各种设备屏幕" >

padding/margin 导致宽度计算出错

很多人加了 padding 或 margin 后发现图片还是溢出，其实是盒模型问题：默认 box-sizing: content-box，width: 100% 不包含 padding。

安全做法是统一设：

• 全局重置：* { box-sizing: border-box; }
• 或者单独给 .image-list li 加 box-sizing: border-box
• 慎用 margin 控制间距——改用 gap（flex 或 grid 容器支持）更可靠

真正麻烦的不是怎么写，而是图片尺寸、容器断点、设备 DPR 三者得对齐。漏掉任意一环，自适应就变成“看起来差不多”。