為移動設備調整 Shiny renderImage 的大小

Question

我在自己的 Shiny 服務器上有一個 Shiny 應用程序，它在 web 頁面上顯示 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")
)
...