Resize Shiny renderImage for mobile - css

Question

I have a Shiny App on my own Shiny Server that displays png images on a web page. This works fine. However, the images are too wide when the page is viewed on an iPhone. In my case, the correct size for the png image on a large screen is 600w x 400h and for an iPhone 330w x 220h works well. How do I auto-resize the image?
R Script
library("shiny")
library("tidyverse")
ui <- fluidPage(
imageOutput("img")
)
server <- function(input, output, session) {
output$img <- renderImage({
path_to_png <- "/var/www/..."
list(src = path_to_png,
width = "600",
height = "400",
alt = "Chart of good stuff")
}, deleteFile = FALSE)
}
shinyApp(ui, server)

Answer 1

You can either use relative units and/or add breakpoints in custom CSS. It looks like imageOutput puts a div around the image so you could do:
ui <- fluidPage(
imageOutput("img", width = "40vw", height = "30vh")
)
server <- function(input, output, session) {
output$img <- renderImage({
path_to_png <- "/var/www/..."
list(src = path_to_png,
width = "100%",
height = "100%",
alt = "Chart of good stuff")
}, deleteFile = FALSE)
}
OR using CSS + breakpoints, something like:
ui <- fluidPage(
tags$head(
tags$style(
"#media only screen and (max-width: 600px) {
#img {
width: 330px !important;
height: 220px !important;
}
}"
)
),
imageOutput("img")
)
...