Question

我正在尝试使用下面的一个图像和一个段落创建一个垂直的flexbox布局。图像必须占用尽可能多的空间，同时仍保持其纵横比。该段落必须尽可能高，宽度与图像相同，并且位于屏幕底部但始终可见（无滚动条）。

这是我在<body>内的代码：

<body>
    <main>
        <img src="sky.png">
        <p>Some text here</p>
    </main>
</body>

CSS：

html {
  font-size: 62.5%;
  height: 100%;
  overflow: hidden;
  background: #000;
}
body {
  height: 100%;
  font-size: 1.6em;
  margin: 0;
}
main {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}
main img {
  flex: 2 1 auto;
  object-fit: contain;
}
main p {
  flex: 1 1 content;
  background: darkblue;
  color: white;
  margin: 0;
}

目前的结果：

The current result

我想要得到的东西：

What I'm trying to get

<image>获取所有屏幕空间，这使<main>做同样的事情。我尝试在align-items上使用<main>适当，但它只是将图像保持原始大小。

将flexbox容器的宽度限制为图像子容器

0 个答案: