img底部空隙源于其默认inline属性及baseline对齐机制，间隙约3–4px；首选display:block或vertical-align:bottom解决。
img 元素本身不继承父容器的 padding
很多人以为给 <img> 加 width: 100% 就能自动避开父容器的 padding，其实不会。浏览器渲染时，width: 100% 是按父容器的 content-box 宽度计算的，而 padding 属于额外空间——图片会撑满整个 content 区域，视觉上「溢出」到 padding 区里，甚至可能被父容器的 overflow: hidden 截断。
用 max-width + box-sizing: border-box 配合父容器设置
真正可控的做法是把图片放进一个 wrapper 容器，并让 wrapper 承担 padding 职责：
- 父容器（比如
<div class="card">）只设padding，不设overflow - 新增一层
<div class="img-wrapper">，设box-sizing: border-box和width: 100% -
<img>设max-width: 100%、height: auto，且 不设 width（否则会覆盖 max-width 的约束）
示例：
<div class="card" style="padding: 1rem;">
<div class="img-wrapper" style="box-sizing: border-box; width: 100%;">
<img src="photo.jpg" alt="" style="max-width: 100%; height: auto;">
</div>
</div>更简洁：直接在 img 上用 width: 100% + calc() 扣除 padding
如果父容器 padding 固定（比如左右各 16px），可以用 CSS 计算：
立即学习“前端免费学习笔记（深入）”；
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 确保父容器有明确 class 或 ID，方便精准控制
- 给
<img>设置width: calc(100% - 32px)（左右 padding 各 16px） - 必须同时设
display: block，避免行内元素默认的基线对齐留白 - 注意：响应式断点变化时，padding 值若也变（如移动端设
padding: 0.5rem），calc()就得配合媒体查询重写
适用场景：padding 值静态、结构简单、不想多加 DOM 节点。
现代方案：用 aspect-ratio 防止拉伸 + object-fit 控制裁剪
仅靠宽度适配还不够——当父容器宽高比和图片不一致时，容易变形或留白。这时要叠加两个属性：
-
aspect-ratio: 16 / 9（或用aspect-ratio: auto读取原图尺寸）可让容器保持比例，避免图片被强制挤压 -
object-fit: cover让图片等比缩放并裁剪填满；object-fit: contain则完整显示但可能留白 - 注意：
object-fit只对<img>和<video>生效，且需配合width/height显式设尺寸（哪怕只是width: 100%; height: 100%）
常见坑：aspect-ratio 在旧版 Safari（aspect-ratio: auto 回退或 JS 补丁。
最易被忽略的是：父容器是否设置了 display: flex 或 display: grid。这两种布局下，width: 100% 行为会受主轴/交叉轴影响，有时图片突然“缩成一条线”，此时优先检查父容器的 display 类型和 align-items 设置。
