How to resize images in Xaringan presentation?

Question

I'm trying to switch from ioslide to xaringan. I'm not able to properly resize a ggplot image to make full screen or al least to occupy as much space as possible. I'm using both fig.height/width and out.height/width arguments but only one dimension change. There is a better way to resize an image? this is the setup:

---
title: ""
author: ""
institute: ""
date: "`r Sys.Date()`"
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
      ratio: 16:9
---
#```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
knitr::opts_chunk$set(fig.retina=2)

library(Cairo)
library(cairoDevice)
library(tidyverse)
library(kableExtra)
#```

--- 

# Plot

#```{r echo=FALSE, out.height=450, out.width= 2000}
knitr::include_graphics("img/Rplot01.svg")
#```

And this is the result:

I would like to expand the image as much as possible

For option `out.width` and `out.height`, the input value needs to be a string. Try "100%" (with the quotes) instead. — Emi, Oct 27 '19 at 21:58

score 14 · Answer 1 · edited Mar 01 '23 at 21:11

14

To set the size of an image

You can use a markdown tag such as:

![:scale 50%](image.jpg)

see this

As a background image:

In Xaringan you can add images like this:

---
class: inverse, center, middle
background-image: url(img/Rplot01.svg)
background-size: contain

Please check that the info within url is correct.

As a guide you can see this presentation (the link drives you to slide number 9, where is an image) generated using this code (see line 76)

edited Mar 01 '23 at 21:11

Karl A

165
11

answered Oct 27 '19 at 17:32

Orlando Sabogal

1,470
7
20

Thanks @Orlando Sabogal for the answer. But I need to simply expand my image not using it as background. The problem is that I'm not able to use properly chunk options for resizing the image – Filippo Gambarota Oct 27 '19 at 17:46
I edited the answer. I think you can add it using markdown. – Orlando Sabogal Oct 27 '19 at 18:01
2

Adding it using the simple Markdown option you have noted: `[:scale 50%]`, did not work for me. Do I need to do something else? – ap21 Apr 28 '22 at 11:50

score 2 · Answer 2 · answered Mar 07 '22 at 13:32

You could also use the html <img> tag to resize and position an image in a Xaringan presentation slide.

<img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg"
     width="500px" height="500px"
     style="position:absolute; right:10px; top:130px;">

How to resize images in Xaringan presentation?

2 Answers2

To set the size of an image

As a background image: