如何在R-Quarto HTML文档标题左侧插入响应式Logo

可以通过自定义CSS结合flex布局实现，完全保留HTML的响应式特性，具体步骤如下：

1. 配置Quarto文档YAML #

在你的.qmd文件头部YAML中，添加自定义头部元素和CSS引用：

---
title: "业务分析报告"
format:
  html:
    css: custom.css
    include-in-header:
      text: |
        <div class="title-logo">
          <img src="images/company-logo.png" alt="公司Logo">
        </div>
---

注：如果你的Logo放在其他路径，修改src属性即可；也可以将include-in-header的内容单独写到header.html文件中，然后引用该文件路径。

2. 编写自定义CSS（custom.css） #

创建custom.css文件，用flex布局重构标题区域，同时设置响应式规则：

/* 把标题块改为flex布局，实现Logo与标题横向排列 */
.quarto-title-block {
  display: flex;
  align-items: center;
  gap: 1.2rem; /* 控制Logo和标题的间距 */
  flex-wrap: wrap; /* 小屏幕下自动换行，保证响应式 */
}

/* 设置Logo的自适应尺寸，避免拉伸变形 */
.title-logo img {
  max-width: 90px;
  height: auto;
}

/* 针对小屏幕设备调整样式 */
@media (max-width: 576px) {
  .title-logo img {
    max-width: 65px;
  }
  .quarto-title-block {
    gap: 0.8rem;
  }
}

核心原理 #

• 用flex布局替代绝对定位，天然支持响应式布局，屏幕宽度不足时会自动让Logo和标题换行；
• 通过max-width和height:auto保证Logo始终保持原有宽高比，不会被拉伸或压缩；
• 利用媒体查询@media针对小屏幕设备调整样式，进一步优化移动端显示效果。

注意事项 #

• 确保Logo图片路径正确，相对于Quarto文档的存放位置；
• 可以根据实际需求调整max-width、gap等参数，适配不同尺寸的Logo和标题风格；
• 该方法兼容所有主流现代浏览器，Quarto生成的HTML报告无需额外配置即可正常显示。

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