常见原因包括：HTML width/height 属性受 CSS（如 max-width、flex）干扰；PDF 渲染器忽略过小 height；未设 type="application/pdf" 或 MIME 错误导致降级；需用 aspect-ratio 或 padding-bottom 配合容器控制比例。
embed 嵌入 PDF 时 width/height 不生效的常见原因
直接写 width="800" 和 height="600" 却发现 PDF 显示区域被裁剪、拉伸或根本没变，大概率不是尺寸写错了，而是浏览器对 <embed> 的渲染行为和 CSS 层叠规则在起作用。
-
<embed>的width和height是 HTML 属性，不是 CSS，但会被 CSS 的max-width、overflow或父容器display: flex干扰 - PDF 渲染器（如 Chrome 的 PDFium）会优先保证内容可读性，可能忽略过小的
height，自动撑高容器 - 未设置
type="application/pdf"时，部分浏览器 fallback 到下载或空白，尺寸控制完全失效 - 某些 CDN 或代理服务返回错误 MIME 类型（比如
text/plain），导致浏览器不调用内置 PDF 渲染器，width/height形同虚设
固定宽高比（如 4:3、16:9）的可靠写法
想让 PDF 始终按比例缩放，不能只靠 width 和 height 两个绝对值——PDF 页面本身有原始尺寸，浏览器不会自动等比缩放内容。得靠 CSS 配合容器控制。
- 给
<embed>外层加一个<div class="pdf-container">，用aspect-ratio（现代浏览器）或 padding-bottom hack（兼容旧版）锁定比例 -
<embed>本身设为width: 100%; height: 100%，并确保父容器有明确高度（比如min-height: 500px） - 必须显式声明
type="application/pdf"，否则 Firefox 可能降级为 iframe 行为，Chrome 可能静默失败 - 示例：4:3 容器 + 自适应嵌入
<div class="pdf-container" style="aspect-ratio: 4/3; max-width: 800px;"> <embed src="doc.pdf" type="application/pdf" width="100%" height="100%"> </div>
embed 的 width/height 和 CSS width/height 混用时的冲突点
HTML 属性 width 和 height 与 CSS 的 width/height 同时存在时，行为不统一：
- Chrome：CSS 优先级更高，HTML 属性会被覆盖（即使没写单位）
- Firefox：HTML 属性仍有效，但若 CSS 写了
width: 100%，会以该百分比为准，忽略 HTML 的像素值 - 移动端 Safari：对
<embed>的height支持不稳定，建议始终用 CSS 控制高度，并设min-height - 安全提示：不要用
width="100%"+height="100%"在无高度约束的父容器里，容易导致高度塌陷为 0
调试 embed 尺寸问题的三步检查法
遇到尺寸异常，别急着改代码，先确认底层是否正常：
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Elements 面板，检查
<embed>元素上是否真实存在width和height属性（注意不是 computed 样式里的值） - Network 面板看 PDF 请求的 Response Headers 中
Content-Type是否为application/pdf；如果不是，问题出在服务端配置 - 临时删掉所有 CSS，只留
<embed src="..." type="application/pdf" width="600" height="800">，看是否恢复正常——如果此时 OK，说明是样式污染
真正难处理的，是 PDF 页面本身尺寸差异大（比如有的页是 A4 竖版，有的页是横向报表），这时 <embed> 无法自动适配单页，只能靠后端统一分辨率导出，或前端换用 pdf.js 手动控制渲染逻辑。
