为移动设备调整 Shiny renderImage 的大小

Question

我在自己的 Shiny 服务器上有一个 Shiny 应用程序，它在网页上显示 png 图像。这工作正常。但是，在 iPhone 上查看页面时，图像太宽。就我而言，大屏幕上 png 图像的正确尺寸是 600w x 400h，而 iPhone 330w x 220h 效果很好。如何自动调整图像大小？

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

您可以使用相对单位和/或在自定义 CSS 中添加断点。看起来imageOutput 在图像周围放置了一个 div，所以你可以这样做：

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

或者使用 CSS + 断点，例如：

ui <- fluidPage(
     tags$head(
      tags$style(
        "@media only screen and (max-width: 600px) {
        #img {
          width: 330px !important;
          height: 220px !important;
        }
        }"
      )
    ),
   imageOutput("img")
)
...