如何在R Slidy HTML演示文稿中合理控制幻灯片及内容尺寸？

问题场景 #

使用默认RStudio Slidy HTML演示文稿模板时，会遇到以下图表尺寸适配问题：

• 默认生成的图表为固定尺寸（约7英寸×5英寸），在大屏或高分辨率屏幕下会留下大量空白区域（缩放仅改变文本大小，不影响图表）：
  
• 在代码块中添加knitr::opts_chunk$set(echo = FALSE, out.width = '100%')尝试自动缩放时，图表会过高，需要滚动才能查看完整内容：
  
• 改用out.height='100%'替代out.width='100%'时，图表会恢复至原始尺寸，无维度变化：
  

核心需求：除手动以英寸为单位指定内容尺寸外，寻求更优方法控制HTML幻灯片及内容大小，实现类似示例幻灯片填满屏幕的效果，同时确认是否必须使用PDF输出解决问题。

解决方案 #

1. 自定义CSS控制幻灯片与图表尺寸 #

通过添加自定义CSS文件，调整幻灯片容器和图表的最大尺寸，同时保持图表的宽高比：

• 在R Markdown文档的YAML头部指定自定义CSS：

---
title: "Untitled"
author: "Author"
date: "`r Sys.Date()`"
output: 
  slidy_presentation:
    css: custom.css
---

• 创建custom.css文件，写入以下样式：

/* 调整幻灯片容器适配屏幕 */
.slide {
  max-width: 95vw;
  max-height: 95vh;
  margin: 0 auto;
}

/* 控制图表最大尺寸，预留内容空间并保持比例 */
.slide img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

2. 结合knitr参数与CSS实现自适应 #

在代码块设置中指定out.width='100%'，配合上述CSS限制图表最大高度，避免图表超出屏幕：

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE, out.width = '100%')

### 3. 优化高分辨率屏幕显示效果
添加`fig.retina=2`参数，让图表在高分辨率屏幕上显示更清晰：
```r
knitr::opts_chunk$set(echo = FALSE, out.width = '100%', fig.retina=2)

4. 避免单独使用out.height='100%' #

单独设置out.height='100%'无效的原因是Slidy默认图片容器限制了宽度，需配合CSS调整容器尺寸后，该参数才能生效，但更推荐用CSS统一控制所有图表的尺寸规则。

完整示例代码 #

修改后的R Markdown文档：

---
title: "自适应Slidy幻灯片示例"
author: "Author"
date: "`r Sys.Date()`"
output: 
  slidy_presentation:
    css: custom.css
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE, out.width = '100%', fig.retina=2)

R Markdown #

这是一份R Markdown演示文稿。Markdown是一种简单的格式化语法，用于创建HTML、PDF和MS Word文档。

点击Knit按钮后，生成的文档将包含内容以及嵌入的R代码块的输出。

带项目符号的幻灯片 #

• 项目1
• 项目2
• 项目3

带R输出的幻灯片 #

summary(cars)

带图表的幻灯片 #

plot(pressure)

对应的`custom.css`内容：
```css
.slide {
  max-width: 95vw;
  max-height: 95vh;
  margin: 0 auto;
}

.slide img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

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