我正在准备一些 html 页面，使用rmarkdown，用于在线发布。在显示绘图时，我想利用典型计算机显示器上的更多可用宽度（这就是我预期目标受众查看我的页面的方式）。knitr默认情况下，在常规缩放时似乎仅使用大约 900 像素。
我发现了一些CSS这个线程 https://stackoverflow.com/questions/34906002/increase-width-of-entire-html-rmarkdown-output这可以使总“画布”更大，这是有帮助的。然而，这也增加了所有内容的宽度，包括文本、块回声等，这是我不想要的。我想要的是让我的图形在宽度上“悬于”其他元素。增加fig.width and out.width没有做到这一点；这些数字将简单地缩小以适应其他元素使用的相同边界，从而导致较小的字体大小等：
<style type="text/css">
.main-container {
max-width: 1500px;
margin-left: auto;
margin-right: auto;
}
</style>
```{r out.width = "150%", fig.width = 12, fig.height = 3, device = "svg", fig.align='center'}
plot(pressure)
```
Here's a mockup of the kind of thing I'm after, stitched together in Paint:
正如您所意识到的，您不应该增加.main-container，而是图像。以下是实现它的一种方法：
---
title: "R Markdown Full-width Figures"
output: html_document
---
```{r out.extra='style="max-width:none; width:100vw; margin-left:calc(50% - 50vw);"', fig.width = 12, fig.height = 3, device = "svg"}
par(mar = c(4, 4.5, 1, .5))
plot(pressure)
```
首先，你需要删除默认的max-width约束（这是由降价) by max-width: none;。然后将图像的宽度设置为100vw，这意味着窗口的整个宽度。此时，您的图像内部仍然左对齐.main-container，即它的左侧与主体元素的其余部分对齐，因此您需要将图像向左移动，以便它接触窗口的左边距，这就是margin-left: calc(50% - 50vw)如上所述。你可以在一张纸上画一个方框来理解它。基本上，margin-left: 50%意味着图像将首先向右移动其容器宽度的一半（即，.main-container）。这意味着它的左侧位于容器的中心。由于容器位于页面中央，因此您需要将图像向左移动50vw（即窗口宽度的一半）。向左移动意味着给它一个负的左边距，因此-50vw. The calc()函数动态计算实际像素数，因此您不必假设容器的宽度是固定的。
一旦你明白了这一点margin-left技巧，您可以使用其他可能的宽度，例如，width: 90vw; margin-left: calc(50% - 45vw)，它给你一个宽度的图像90vw并居中于页面：
如果您不想内联 CSS<img>，您可以将代码块包装在围栏分区 https://bookdown.org/yihui/rmarkdown-cookbook/custom-blocks.html带有类名，以便您可以重用为该类定义的 CSS。这是一个例子：
---
title: "R Markdown Full-width Figures"
output: html_document
---
```{css, echo=FALSE}
.fullwidth img {
max-width: none;
width: 100vw;
margin-left: calc(50% - 50vw);
}
```
## One plot
::: {.fullwidth}
```{r, fig.width = 12, fig.height = 3, device = "svg"}
par(mar = c(4, 4.5, 1, .5))
plot(pressure)
```
:::
## Another plot
::: {.fullwidth}
```{r, fig.width = 12, fig.height = 5, device = "svg"}
par(mar = c(4, 4.5, 1, .5))
boxplot(mpg ~ gear, data = mtcars, horizontal = TRUE)
```
:::