如何使Shiny app中的图像宽度动态化?

时间:2015-05-27 09:35:39

标签: css r image shiny

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

ui.R

library(shiny)

shinyServer(function(input, output, session) {

   output$image <- renderImage({
      return(list(
         src = "one.png",
         contentType = "image/png",
         height = 185,
         alt = "Face"
      ))
   })
})

server.R

$count = $this->rci_model->get_count(); //get number of rows

$config['base_url'] = base_url().'index.php/sandal_clarudo/sandals_for_men/';
$config['total_rows'] = $count;
$config['per_page'] = 5;
$config['uri_segment'] = 3;
$limit = $config['per_page'];

$this->pagination->initialize($config);

$page = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0;

$data['links'] = $this->pagination->create_links();

$data["results"] = $this->rci_model->fetch_countries($limit, $page);

1 个答案:

答案 0 :(得分:6)

您可以使用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选择器(此处为#image)应与outputId的{​​{1}}对应。