正如您所意识到的,您不应该增加.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)
```
:::