Question

我有一个带有2个项目的基本弹性箱容器..

library(ggplot2)
d <- data.frame(runif(100, min=0, max=10000))
names(d) <- "randnum"

box1 <- ggplot(d, aes_string(x=factor(0), y=d$randnum)) + 
  geom_boxplot(alpha = 0) + geom_jitter(size = 3, alpha = 0.5, color = "tomato")

box1 <- box1 +  theme(legend.position = "none", axis.title =element_blank(),
                      axis.text.x =element_blank(), axis.ticks.x=element_blank())

box1

html, body {
    margin:0;
}

.container {
    display: flex;
    flex-direction:row;
}

.item div {
  width: 100%;
  padding-bottom: 56.25%;
  background: gold;
}

img {
    max-width:100%;
    object-fit:cover;
}

按照Maintain the aspect ratio of a div with CSS处的代码 - 我正在尝试制作2项16：9。但它没有按预期工作。

我哪里错了？

Answer 1

您的问题是子div内的img元素正在改变高度。然后在顶部应用填充。如果您删除img，我会明白我的意思。

要解决此问题，您可以将图片添加为：background: url('imageurl')。然后将flex-basis: 50%添加到您的孩子身上吧！

有人说 codepen 吗？

Flexbox - 制作项目16：9

1 个答案: