Picure does not print in PDF if the size exceed the silde

[albert-ying]

Here is a minimal example. It applies to any picture as far as I am aware of. This is a problem especially when using pictures with large white margins, It is hard to tell whether it exceeds the edge of the slide by eye.

---
title: 'cat'
subtitle: ''
author: ''
date:  ''
output:
  xaringan::moon_reader:
    lib_dir: libs
    self-contain: true
    nature:
      highlightStyle: github
      slideNumberFormat: ''
      highlightLines: true
      countIncrementalSlides: false
      ratio: '16:9'
---

# Normal size cat

<img src="p1.png" width="57%" class="center" align=""/>

---

# Large cat

<img src="p1.png" width="100%" class="center" align=""/>

Result HTML from bulid_html

Result PDF from bulid_pdf

[gadenbuie]

This is a commonly-encountered problem. It's an issue with Chrome's printing algorithm wherein Chrome excludes images that extend beyond the visible margin from printing. I'm sure this makes sense for general webpage printing, but it does cause problems for slides.

One option is to use the background-image property to include the image on your slide. AFAIK this problem doesn't arise in that context.

The other option is to limit the size of your pictures and make sure they fit in the slide. Copying from my answer in #40 (comment):

It can be hard to tell visually if the plot extends past the margins of the slide because the actual image may include empty space that you can't see. It's a weird thing with Chrome that if any part of the image is clipped the whole image may be missing from the printed version.

To diagnose it, try including this CSS in your slides (you can put this chunk anywhere)

```{css echo=FALSE}
img { outline: 2px solid red; }
```

This will add a red outline around your plots and might help you see if the plot is extending past the slide margins. Here's an example where it might look like the plot fits in the slide, but the outline shows that it doesn't.