Quarto RevealJS演示中调整图片大小后位置偏移的解决咨询

你遇到的问题是因为直接使用width/height属性时，Quarto生成的HTML元素布局规则和.absolute类的定位样式发生冲突，导致图片位置偏移。可以通过以下几种方法解决：

方法1：使用内联style属性直接定义定位和尺寸 #

直接在图片属性中用style明确指定所有样式，优先级更高，能避免样式冲突：

---
title: "test"
format: revealjs
editor: visual
---

## Slide

When you click the **Render** button a document will be generated that includes:

-   Content authored with markdown
-   Output from executable code
-   Another point

![](R_logo.svg.png){style="position: absolute; top: 0; right: 0; width: 100px; height: 100px;"}

方法2：自定义CSS类 #

在文档头部添加自定义样式，然后给图片应用这个类，便于复用：

---
title: "test"
format: revealjs
editor: visual
---

<style>
.top-right-small {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
}
</style>

## Slide

When you click the **Render** button a document will be generated that includes:

-   Content authored with markdown
-   Output from executable code
-   Another point

![](R_logo.svg.png){.top-right-small}

方法3：调整属性写法（可选） #

尝试去掉width/height属性中的空格，改为width="100"而非width = "100"，部分情况下能修复解析问题：

![](R_logo.svg.png){.absolute top=0 right=0 width="100" height="100"}

以上方法中，方法1和方法2的兼容性与稳定性最好，能确保图片始终保持在右上角并正确显示设置的尺寸。

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