Revealjs slides with images that have larger than 100% width?

[cod3licious]

Description

I would like to create a revealjs slide where the images are larger than the slide content margins. I've tried many things, but just can't figure it out. 😫

My current setup is:

---
title: "Test"
author: "me"
date: "2025-02-20"
format: revealjs
auto-stretch: false
---

## Image r-stretch
![](test_img.png){.r-stretch fig-align="center"}

## Image 100% width
![](test_img.png){width="100%" fig-align="center"}

## Image 150% width
![](test_img.png){width="150%" fig-align="center"}

## Image 1000px width
![](test_img.png){width="1000" fig-align="center"}

## Image 650px height
![](test_img.png){height="650" fig-align="center"}

## Image 1000px width absolute
![](test_img.png){.absolute left=-50 width="1000"}

Here is the full reproducible example:
test_slides.zip

Some unpleasant observations:

• width="100%" is for some reason smaller than .r-stretch (with auto-stretch: false)?!
• all other larger than 100% width sizes, no matter how I define them (pixel or percentage), get ignored
• larger height gets applied, but then the width is not scaled accordingly, so the image gets distorted
• when using .absolute I can increase the margin by moving the image further to the left, but this still doesn't help with increasing the image width

How can I force quarto to actually use the width that I provided (similar to height, only without distorting the image)?

---

I'm using quarto 1.6.40 (latest) on macOS 14.6.1

[mcanouil]

Reveal.js sets the size of the slide, what you have around is not the slide, so setting width to 100% won't change the size of the container.
Note that what you are trying to do is basically overflowing the document area thus outside of "printable are" if you will.

FYI, all your observations are HTML/CSS. That's independent of Quarto or Reveal.js.
So you need to understand how these things work.

An alternative is to use background image.

All this become obvious with other theme: https://emilhvitfeldt.github.io/quarto-revealjs-letterbox/#/title-slide
Or if you inspect your HTML with your favourite browser for example.

[cod3licious]

In PowerPoint and other WYSIWYG editors you can usually place images anywhere on the slide and scale them however you want, so your slide margins are only determined by how you position the elements, and you can easily place the title so that it has a 1cm margin to the left but then make the image span the whole slide without a margin.
I would already be very happy if this was the result I got, i.e., the image does not have to occupy the whole viewport, but it should go from side to side without a margin when I export the slides as PDF. The background image does this, but it's a bit tricky to position it in a way that guarantees the title is always neatly above it like with a normal image.

[mcanouil]

but it should go from side to side without a margin when I export the slides as PDF.

How do you export to PDF? This could be the issue.

[cod3licious]

I click "e" for the print view in Chrome and then save as PDF with margins set to None.
I mean, I think all this behavior is by design: you normally do want a margin on your slides and not have the title be stuck to the top left corner without any whitespace, this would look terrible. So in general, the default margin of 0.1 is reasonable for text on slides.
I think what would solve my problem is if there was something similar to the .absolute class, but where the positions specified were based on the whole slide (ignoring the margin) instead of (how it is right now) inside the "slide content space" (i.e., the 90% of the actual slides with the default setting of margin: 0.1).

[mcanouil]

There are no margins in the slide content, everything around is only there to fill the gap which PDF (Beamer) or PowerPoint don't do.
The only margin is around the slide itself and it is set via margin YAML which is documented to modify the whole layout (https://quarto.org/docs/presentations/revealjs/advanced.html#presentation-size).

As you can see the image occupies the full width of the slide with .r-stretch (this is a Reveal.js option, if you want to make advanced customisation, you need to read the Reveal.js documentation) and 95% without via max-width.
You can tweak that and get your image overflow on the right.

Screen.Recording.2025-02-21.at.11.10.55.mov

Now, with absolute positioning and understanding of HTML/CSS obtained via the inspection of the HTML/CSS allow you to do:

---
title: Slides
format:
  revealjs:
    width: 1050
    height: 700
---

## Slide 1

This is slide 1

![]({{< placeholder 1200 300 >}}){.absolute left=-75 style="max-width: none;"}

Exporting to PDF via decktape to the exact same size as the presentation is set (default size by the way):

Now exporting a to width of 1500

At this point you gathered multiple informations which could allowed you to figure out other CSS attributes to avoid having to define manually left, etc.

---
title: Slides
format:
  revealjs:
    width: 1050
    height: 700
    include-in-header:
      - text: |
          <style>
          .overflow-image {
            max-width: none !important;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
          }
          </style>
---

## Slide 1

This is slide 1

![]({{< placeholder 25000 300 >}}){.nostretch .overflow-image}

In the future, if you want to customise HTML, you need to learn it. There are no way around this and you usually won't have people make the whole thing for you because as I said, it takes time.

I'm afraid, now you need to work on this yourself and again al this won't change how Reveal.js and web technologies work.

Screen.Recording.2025-02-21.at.11.52.39.mov

[cod3licious]

Thank you! 🙏