css – 如何使Shiny app中的图像宽度动态变化？

我正在编写一个应用程序,我希望sidebarPanel中的图像比我放在其中的图像大一点.随着窗口变小或变大,侧边栏也变得越来越小,但图像保持静止.我该如何解决这个问题？有没有办法获得侧边栏长度或有更好的方式来渲染图像？

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

解决方法

您可以使用css标签设置图像样式,如下所示：

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

其中css id selector(此处为#image)应对应于imageOutput的outputId.