---
title: Image overflow example
output:
  xaringan::moon_reader:
    seal: false
    self_contained: false
---

class: center middle

# First slide

```{r}
#| echo: false
xaringanExtra::use_share_again()
xaringanExtra::style_share_again(share_buttons = "none")
```

---

# Slide with clipped plot

This slide makes a plot that won't fit on the slide.

```{r plot, results="hide"}
hist(faithful$waiting)
```

---
class: bottom right

# Absolutely positioned plot

<img src="`r knitr::fig_chunk("plot", ext = "png")`" style="position: absolute; top: -2px; left: -20px;">

---

# SVG too big!

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="currentColor" class="bi bi-bug" viewBox="0 0 16 16"><path d="M4.355.522a.5.5 0 0 1 .623.333l.291.956A4.979 4.979 0 0 1 8 1c1.007 0 1.946.298 2.731.811l.29-.956a.5.5 0 1 1 .957.29l-.41 1.352A4.985 4.985 0 0 1 13 6h.5a.5.5 0 0 0 .5-.5V5a.5.5 0 0 1 1 0v.5A1.5 1.5 0 0 1 13.5 7H13v1h1.5a.5.5 0 0 1 0 1H13v1h.5a1.5 1.5 0 0 1 1.5 1.5v.5a.5.5 0 1 1-1 0v-.5a.5.5 0 0 0-.5-.5H13a5 5 0 0 1-10 0h-.5a.5.5 0 0 0-.5.5v.5a.5.5 0 1 1-1 0v-.5A1.5 1.5 0 0 1 2.5 10H3V9H1.5a.5.5 0 0 1 0-1H3V7h-.5A1.5 1.5 0 0 1 1 5.5V5a.5.5 0 0 1 1 0v.5a.5.5 0 0 0 .5.5H3c0-1.364.547-2.601 1.432-3.503l-.41-1.352a.5.5 0 0 1 .333-.623zM4 7v4a4 4 0 0 0 3.5 3.97V7H4zm4.5 0v7.97A4 4 0 0 0 12 11V7H8.5zM12 6a3.989 3.989 0 0 0-1.334-2.982A3.983 3.983 0 0 0 8 2a3.983 3.983 0 0 0-2.667 1.018A3.989 3.989 0 0 0 4 6h8z"/></svg>

---

This little CSS can help during development,
not so much once you've built out all of your slides.

```{css eval = FALSE}
img, svg { outline: 2px solid red; }
```

```{css echo = FALSE}
/* this is the real css I applied
   to avoid red outlines in the share bar */
:not(.shareagain-button) > :is(img, svg) {
  outline: 2px solid red;
}
```
