Come posso rendere dinamica la larghezza di un'immagine in un'app Shiny?

Question

Sto scrivendo un'app e voglio che l'immagine nel sidebarPanel sia solo un po 'più grande dell'immagine che ho inserito al suo interno. Man mano che la finestra diventa più piccola o più grande, così fa la barra laterale, ma l'immagine rimane statica. Come posso risolvere questo problema? C'è un modo per ottenere la lunghezza della barra laterale o c'è un modo migliore per il rendering delle immagini?

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

È possibile lo stile l'immagine utilizzando tag css, come di seguito:

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") 
    ) 
)), 

dove selettore CSS id (qui #image) dovrebbe corrispondere allo outputId dello imageOutput.