如何在Quarto YAML中全局设置HTML图片宽度为页面百分比？

问题分析 #

• fig-width参数的作用是设置图片的英寸宽度，不支持百分比字符串，因此输入"60%"会触发类型错误
• 改为0.5后无报错但无效果，是因为0.5英寸的图片尺寸过小，且HTML默认布局样式可能覆盖了该设置

正确配置方法 #

要全局统一设置图片宽度为页面的60%，需通过CSS样式实现，以下两种方式可选：

方式1：在YAML中直接嵌入CSS #

修改项目的YAML配置，通过include-in-header嵌入自定义样式：

---
format:
  html:
    default-image-extension: png
    include-in-header:
      text: |
        <style>
          img {
            max-width: 60%;
            height: auto;
          }
        </style>
---

方式2：使用外部CSS文件 #

1. 在项目根目录创建custom.css文件，添加以下内容：

img {
  max-width: 60%;
  height: auto;
}

2. 在YAML配置中引入该CSS文件：

---
format:
  html:
    default-image-extension: png
    css: custom.css
---

补充说明 #

• 使用max-width而非width，可确保图片在小屏幕设备上自动适配容器宽度，不会出现横向溢出
• height: auto用于保持图片原始宽高比，避免拉伸变形

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