Question

例如，如果我放置

library(shiny)
library(ggplot2)
library(lubridate)

options(shiny.maxRequestSize = 100*1024^2)

# Define UI for data upload app ----
ui <- fluidPage(

# App title ----
titlePanel("My First Shiny App"),

fluidRow(
column(width = 3,
       # Input: Select a file ----
       fileInput("file1", "Choose CSV File",
                 multiple = FALSE,
                 accept = c("text/csv",".csv"))
)
),

fluidRow(
  column(width = 3,
       textOutput("info")
)
)
)

# Define server logic to read selected file ----
server <- function(input, output) {

output$contents <- renderText({

req(input$file1)

df <- read.csv(input$file1$datapath, header = TRUE)

output$info <- renderText({
  return(min(df$Temp))     
 })

})
}

# Create Shiny app ----
shinyApp(ui, server)

Date,Temp,Precipitation,Station
2018-01-01 00:05:00,-1,0,ATRS2
2018-01-02 00:10:00,-10,0,BSNS2
2018-01-03 00:15:00,-2,0,BKMS2
2018-01-04 00:20:00,-1,0,ATRS2
2018-01-05 00:25:00,-9,0,BSNS2
2018-01-06 00:30:00,-10,0,BKMS2
2018-01-07 00:35:00,-6,0,ATRS2
2018-01-08 00:40:00,-10,0,BSNS2
2018-01-09 00:45:00,-5,0,BKMS2
2018-01-10 00:50:00,-2,0,ATRS2
2018-01-11 00:55:00,-6,0.254,BSNS2
2018-01-12 01:00:00,-1,0.254,BKMS2
2018-01-13 01:05:00,-7,0,ATRS2
2018-01-14 01:10:00,-3,0,BSNS2
2018-01-15 01:15:00,-10,0,BKMS2
2018-01-16 01:20:00,-10,0,ATRS2
2018-01-17 01:25:00,-2,0,BSNS2
2018-01-18 01:30:00,-8,0,BKMS2
2018-01-19 01:35:00,-9,0,ATRS2
2018-01-20 01:40:00,-4,0,BSNS2
2018-01-21 01:45:00,-8,0,BKMS2
2018-01-22 01:50:00,-3,0,ATRS2
2018-01-23 01:55:00,-2,0,BSNS2
2018-01-24 02:00:00,-3,0,BKMS2

在某处，然后将样式<div> <img ...> </div>，width，height等应用于max-width元素，我希望结果看起来就像放置了一样那里有div元素并将样式应用于它。

这可以使用CSS吗？如果没有，是否可以使用JavaScript？

编辑：澄清。我不是在寻找特定案例的解决方案。相反，我正在寻找某种模式来用img元素替换img元素，而不改变外观。该模式应该在尽可能多的上下文中起作用。

Answer 1

你可以简单地使用

img {
  width: 100%;
  height: 100%;
  display: block;
}

然而，这很可能会导致图像失真（即宽高比），除非您按照与图像比例相对应的比例精确定义宽度和高度。

Answer 2

将css属性display设置为inline-block。

这是一个片段（div边框为蓝色）：

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
    box-sizing: content-box;    
    display:inline-block;
}

</style>
</head>
<body>

<h1>


<p></p>
<div id="example1"><img src="https://lh4.googleusercontent.com/-Y6mZ3dizRWA/AAAAAAAAAAI/AAAAAAAAAZ8/lC8SUn_bjkU/photo.jpg?sz=48"></img></div>

</body>
</html>

Answer 3

是的，如果您为图片设置width: 100%和height: 100%，则会占用您的div的大小。

但是您的图片会以这种方式拉伸，您可能只想指定其宽度或高度，或者如果您想要一个智能的方法来填充带有图片的div，则更喜欢使用background-image background-size到cover或contain。

PS：图片代码是唯一标记：<img>不是<img></img>

在大小方面，如何让父元素的行为与其子元素完全相同？

3 个答案: