HTML转PDF场景下图片缩放与两侧对齐问题求助

直接通过CSS Flexbox布局结合打印媒体查询，就能解决Logo偏移、尺寸失控的问题，同时保证横向打印的一致性：

1. 调整HTML结构 #

确保页眉是一个独立容器，包含标题和Logo元素：

<div class="page-header">
  <h1>业务报表标题</h1>
  <img src="path/to/your/logo.png" alt="品牌Logo" class="header-logo">
</div>

2. 核心CSS样式（含打印适配） #

/* 基础样式：适配屏幕预览与打印 */
.page-header {
  display: flex;
  justify-content: space-between; /* 标题左对齐、Logo右对齐，中间间距自动均匀分配 */
  align-items: center; /* 标题与Logo垂直居中对齐 */
  width: 100%;
  padding: 1rem 0;
  box-sizing: border-box;
}

.page-header h1 {
  margin: 0; /* 清除标题默认外边距，避免干扰间距计算 */
  font-size: 1.8rem; /* 根据需求调整标题大小 */
}

.header-logo {
  max-width: 120px; /* 限制Logo最大宽度，按需调整 */
  max-height: 60px; /* 限制Logo最大高度，保持比例 */
  object-fit: contain; /* 确保Logo按比例缩放，不拉伸变形 */
}

/* 打印专属配置：强制横向+统一边距 */
@media print {
  @page {
    size: landscape; /* 强制文档横向打印 */
    margin: 1cm; /* 统一打印边距，避免内容溢出或偏移 */
  }

  body {
    width: 100vw; /* 适配横向页面宽度 */
    margin: 0;
  }

  .page-header {
    page-break-inside: avoid; /* 防止页眉被分页拆分 */
  }
}

关键逻辑说明 #

• justify-content: space-between 会让容器内的标题和Logo分别贴紧左右边缘，中间空白间距自动填充，确保两者与页面边缘、彼此之间的间距均匀；
• max-width/max-height 限制Logo的最大尺寸，同时object-fit: contain保证Logo不会变形，解决“不缩放尺寸过大”的问题；
• 打印媒体查询中的@page size: landscape 强制文档横向，统一边距避免不同渲染引擎的默认样式干扰。

额外排查点 #

如果仍有偏移，检查以下内容：

• 移除之前代码中给标题或Logo设置的固定margin/padding值；
• 确保Python生成PDF的工具（如WeasyPrint、wkhtmltopdf）正确加载了上述CSS样式；
• 确认Logo图片本身没有多余的空白边距（可提前用图片编辑工具裁剪）。

内容的提问来源于stack exchange，提问作者kevinks