blogdown won't autoscale images and/or plots

[ghost]

_For reference see my stackoverflow question. I have also updated all my packages via update.packages(ask = FALSE, checkBuilt = TRUE) and tinytex::tlmgr_update()._

---

My expected behavior for blogdown sites is "autoscaling of images" dependent on screen resolution. I'll illustrate this below with a gif take from Yihui's site. Note how the plot autoscales when I change the browsers size. Then the next gif is from my website link here, and notice how the plot/image size is static, and doesn't autoscale as the browser size changes. This is a problem on low resolution screens (ie smaller mobiles in portrait mode) as my plots end up getting cut off.

I want the default behavior like all other blogdown sites. I don't know what's wrong with mine. I don't recall changing this autoscale plot/image behavior at any point. I'll include my config.toml, session info, and the actual code used further below in this post.

Expected autoscaling of plots/images [![autoscaled][4]][4]

My non autoscaled plots/images on a default blogdown installation (w/default theme) [![non autoscaled][5]][5]

My config.toml file

baseurl = "/"
languageCode = "en-us"
title = "The Data Literacy Blog"
theme = "hugo-lithium"
googleAnalytics = ""
disqusShortname = ""
ignoreFiles = ["\\.Rmd$", "\\.Rmarkdown$", "_files$", "_cache$"]

[permalinks]
    post = "/:year/:month/:day/:slug/"

[[menu.main]]
    name = "Blog"
    url = "/"
    weight = 1
[[menu.main]]
    name = "Data Analysis"
    url = "/data-analysis/"
    weight = 2
[[menu.main]]
    name = "Contact"
    url = "/contact/"
    weight = 3

[params]
    description = "A website built through Hugo and blogdown."

    # options for highlight.js (version, additional languages, and theme)
    highlightjsVersion = "9.12.0"
    highlightjsCDN = "//cdnjs.cloudflare.com/ajax/libs"
    highlightjsLang = ["r", "yaml"]
    highlightjsTheme = "github"

    MathJaxCDN = "//cdnjs.cloudflare.com/ajax/libs"
    MathJaxVersion = "2.7.5"

    [params.logo]
    url = "logo.png"
    width = 50
    height = 50
    alt = "Logo"

The actual code Rmd file for post under consideration

---
title: "How to Compute Control Chart Limits (XmR Charts)"
author: "Jason Hunter"
date: 2019-03-01
categories: ["SPC"]
tags: ["SPC", "Control Chart"]
---

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

Including Plots

You can also embed plots, for example:

plot(pressure)

Note that the echo = FALSE parameter was added to the code chunk to prevent printing of the R code that generated the plot.

**Session Info**

xfun::session_info() R version 3.5.3 (2019-03-11) Platform: x86_64-pc-linux-gnu (64-bit) Running under: Ubuntu 18.04.2 LTS, RStudio 1.2.1280

Locale: LC_CTYPE=en_US.UTF-8
LC_NUMERIC=C
LC_TIME=en_US.UTF-8
LC_COLLATE=en_US.UTF-8
LC_MONETARY=en_US.UTF-8
LC_MESSAGES=en_US.UTF-8
LC_PAPER=en_US.UTF-8
LC_NAME=C
LC_ADDRESS=C
LC_TELEPHONE=C
LC_MEASUREMENT=en_US.UTF-8 LC_IDENTIFICATION=C

Package version: askpass_1.1 assertthat_0.2.1
backports_1.1.3 base64enc_0.1.3
BH_1.69.0.1 blogdown_0.11
bookdown_0.9 broom_0.5.1
callr_3.2.0 cellranger_1.1.0
cli_1.1.0 clipr_0.5.0
colorspace_1.4-1 compiler_3.5.3
crayon_1.3.4 curl_3.3
DBI_1.0.0 dbplyr_1.3.0
digest_0.6.18 dplyr_0.8.0.1
ellipsis_0.1.0 evaluate_0.13
fansi_0.4.0 forcats_0.4.0
fs_1.2.7 generics_0.0.2
ggplot2_3.1.0 glue_1.3.1
graphics_3.5.3 grDevices_3.5.3
grid_3.5.3 gtable_0.2.0
haven_2.1.0 highr_0.8
hms_0.4.2 htmltools_0.3.6
httpuv_1.5.0 httr_1.4.0
jsonlite_1.6 knitr_1.22
labeling_0.3 later_0.8.0
lattice_0.20-38 lazyeval_0.2.2
lubridate_1.7.4 magrittr_1.5
markdown_0.9 MASS_7.3.51.1
Matrix_1.2.16 methods_3.5.3
mgcv_1.8.28 mime_0.6
modelr_0.1.4 munsell_0.5.0
nlme_3.1-137 openssl_1.2.2
packrat_0.5.0 pillar_1.3.1
pkgconfig_2.0.2 plogr_0.2.0
plyr_1.8.4 prettyunits_1.0.2 processx_3.3.0 progress_1.2.0
promises_1.0.1 ps_1.3.0
purrr_0.3.2 R6_2.4.0
RColorBrewer_1.1.2 Rcpp_1.0.1
readr_1.3.1 readxl_1.3.1
rematch_1.0.1 reprex_0.2.1
reshape2_1.4.3 rlang_0.3.2
rmarkdown_1.12 rstudioapi_0.10
rvest_0.3.2 scales_1.0.0
selectr_0.4.1 servr_0.13
splines_3.5.3 stats_3.5.3
stringi_1.4.3 stringr_1.4.0
sys_3.1 tibble_2.1.1
tidyr_0.8.3 tidyselect_0.2.5
tidyverse_1.2.1 tinytex_0.11
tools_3.5.3 utf8_1.1.4
utils_3.5.3 viridisLite_0.3.0 whisker_0.3.2 withr_2.1.2
xfun_0.5 xml2_1.2.0
yaml_2.2.0

  [4]: https://i.stack.imgur.com/1HPX0.gif
  [5]: https://i.stack.imgur.com/D16J8.gif

[gadenbuie]

The width of the image can be controlled in a number of places. You can add out.width = "100%" to the chunk option for the chunk that produces the plot, or you can make this the default setting for figures by setting this option globally with knitr::opts_chunk$set(out.width = "100%").

```{r setup, include=FALSE}
knitr::opts_chunk$set(collapse = TRUE, out.width = "100%")

You can also embed plots, for example:

plot(pressure)

This is a more "manual" solution because you would need to do this in each new post. For a more robust solution, you can instead use a CSS rule to target images, for example the [theme from my blog](https://github.com/gadenbuie/garrickadenbuie-com/blob/390fdc5d3d1e457ea6eb2b58168152f6c2dae549/themes/hyde/static/css/poole.css#L207-L212) uses

```css
img {
  display: block;
  margin: 0 0 1rem;
  border-radius: 5px;
  max-width: 100%;
}

The key statement in the above is setting max-width: 100%;, which allows you to set the width of images but won't let an image grow beyond the width of it's parent container. The Static Files section of the blogdown book may help you in terms of where to store this CSS rule.

[yihui]

Thank you both! Good question, and perfect answer!

[ghost]

Modifying CSS through Static files section of blogdown is a little over my head so I'll just setup all *.Rmd files with:

```{r setup, include=FALSE}
knitr::opts_chunk$set(collapse = TRUE, out.width = "100%")

In the meantime I'll request that the default blogdown behavior be `out.width = "100%"`. Beginner users like me probably want autoscaling of plots/images without having to dial in many knobs.

Thanks for everybody's input.