Quarto RevealJS幻灯片中嵌入图片无法缩放的问题求助

以下是几个可行的解决思路：

• 使用RevealJS专属的data-width属性
  RevealJS对图片尺寸的识别可能依赖自身的属性而非通用的width，试试替换成data-width：

  ![](https://upload.wikimedia.org/wikipedia/commons/a/a4/Discharging_capacitor.svg){data-width="50%"}
  

  或者设置绝对像素值：

  ![](https://upload.wikimedia.org/wikipedia/commons/a/a4/Discharging_capacitor.svg){data-width=600}
  

• 用Quarto代码块包裹图片
  通过Quarto的容器块来约束图片尺寸，直接在块属性中设置宽度：

  :::{width=50%}
  ![](https://upload.wikimedia.org/wikipedia/commons/a/a4/Discharging_capacitor.svg)
  :::
  

  也可以用带标题的figure块，同时实现尺寸控制和图片标注：

  ::figure
  ![](https://upload.wikimedia.org/wikipedia/commons/a/a4/Discharging_capacitor.svg)
  :::{#fig-discharge width=50%}
  放电电容示意图
  :::
  

• 自定义CSS强制覆盖样式
  如果上述方法无效，可能是RevealJS的默认全局样式覆盖了你的设置，可通过自定义CSS解决：

  1. 在文档头部的YAML中指定自定义CSS文件：

     format:
       revealjs:
         css: custom.css
     

  2. 在custom.css中添加针对图片的样式（全局生效）：

     .reveal section img {
       max-width: 50% !important;
       height: auto !important;
     }
     

  若只需针对单张图片，可给图片添加类名后单独设置：

  ![](https://upload.wikimedia.org/wikipedia/commons/a/a4/Discharging_capacitor.svg){.custom-img}
  

  对应的CSS：

  .custom-img {
    max-width: 600px !important;
    height: auto !important;
  }
  

• 检查全局样式冲突
  查看是否有其他自定义CSS或Quarto扩展修改了图片的默认样式，比如是否设置了max-width: 100%且优先级更高，这种情况下需要调整选择器的特异性或使用!important强制覆盖。

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