CODEWITHSUNDEEP
htmlcssr-markdown
mat
mat

Reputation: 2617

Display large image in Rmarkdown

I am trying to display a large image in an Rmarkdown html output without it being automatically resized. To do so, I want to place the image inside a div element (that is smaller than the image itself) that can be scrolled along the x- and y-axis.

This is what I have tried so far:

---
title: "test"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

<style>
  .container {
    overflow: scroll !important;
    white-space: nowrap;
    max-width: 300px;
    max-height: 300px;
  }
</style>

<div class="container">
  <img src="https://images.hdqwalls.com/wallpapers/talking-to-the-moon-ym.jpg" width="2000px"/>
</div>

What I would like is to be able to display the image in its original size with scrollable elements along the two axis.

Edit

This is an illustration of what I am looking for:

enter image description here

Upvotes: 5

Views: 1054

Answers (2)

Radovan Miletić
Radovan Miletić

Reputation: 2821

Hmm... when I run (Knit) the following code:

---
title: "test"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

<style>
  .container {
    overflow: scroll !important;
    white-space: nowrap;
    max-width: 300px;
    max-height: 300px;
  }
  img {
    max-width: 1000%;
  }
</style>

<div class="container">
  <img src="https://images.hdqwalls.com/wallpapers/talking-to-the-moon-ym.jpg" width="2000px"/>
</div>

This is the output that I get:

enter image description here

Upvotes: 7

Daniel_j_iii
Daniel_j_iii

Reputation: 3242

What about this?

---
title: "test"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

<style>
  .container {
    overflow: scroll !important;
    white-space: nowrap;
    width: 100%;
    height: 100%;
  }
</style>

<div class="container">
  <img src="https://images.hdqwalls.com/wallpapers/talking-to-the-moon-ym.jpg"     width="2000px"/>
</div>

Didn't know if this was possibly overlooked, just make width = 100% and height = 100%

Upvotes: 0

Related Questions