Shiny self-adjusting icon images

Question

I have a shiny app in which I want to have action buttons with images. Below is a sample code:

library(shiny)
library(shinyWidgets)
library(shinydashboard)

url = "http://images.all-free-download.com/images/graphicthumb/button_play_89677.jpg"

ui <- fluidPage(
  fluidRow(
    box(width = 12,
        column(
          3, actionBttn(
            "button1", label = "figure 1",
            icon = div(img(src = url)),
            block = FALSE,
            style = "fill"
          )),
        column(
          3, actionBttn(
            "button2", label = "figure 2",
            icon = div(img(src = url)),
            style = "fill"
          )),
        column(
          3, actionBttn(
            "button3", label = "figure 3",
            icon = div(img(src = url)),
            style = "fill"
          )),
        column(
          3, actionBttn(
            "button4", label = "figure 4",
            icon = div(img(src = url)),
            style = "fill"
          ))
    )
    
  )
)

server <- function(input, output) {
  output$action = renderText('abc')
}

app = shinyApp(ui = ui, server = server)
runApp(app)

This will cause a problem that if the browser is not maximized, the images will overlap and won't show entirely. Is there a way to tell shiny to dodge the images and show each image entirely?

Answer 1

Seems not bad like this:

icon = div(
  style = "width: 100%; height: 100%", 
  img(src = url, style = "width: inherit; height: inherit;")
)