How can I make the width of an image in a Shiny app dynamic?

Question

I am writing an app and I want the image in the sidebarPanel to be just a bit bigger than the image I put inside it. As the window gets smaller or larger, so does the sidebar, but the image stays static. How do I fix this problem? Is there a way to get the sidebar length or is there a better way to render images?

ui.R

library(shiny)

shinyUI(bootstrapPage(

   # Application title
   titlePanel("Sidebar Image App"),
   sidebarPanel(
      imageOutput("image", height = "auto")
   )
))

server.R

library(shiny)

shinyServer(function(input, output, session) {

   output$image <- renderImage({
      return(list(
         src = "one.png",
         contentType = "image/png",
         height = 185,
         alt = "Face"
      ))
   })
})

Answer 1

You can style the image using css tag as below:

shinyUI(bootstrapPage(
    titlePanel("Sidebar Image App"),

    tags$head(tags$style(
        type="text/css",
        "#image img {max-width: 100%; width: 100%; height: auto}"
    )),

    sidebarPanel(
        imageOutput("image")
    )
)),

where css id selector (here #image) should correspond to the outputId of the imageOutput.