如何使图像在 flex 容器中占据最大空间？

Question

我需要使图像在 flex 容器中采用最大尺寸（采用最大宽度或最大高度）。

由于父容器没有固定的宽度和高度，我不能使用max-width 和max-height 和flex:1 也不起作用。

这是一个问题的例子：https://jsfiddle.net/vb26u0e5/2/

我希望图像自动占用所有可用的绿色空间（删除 width: 40px; 第 20 行）。

#mainContainer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  color: white;
}

#imageContainer {
  flex: 1;
  display: flex;
  justify-content: space-between;
  background-color: green;
}

#image {
  width: 40px;
}

#previous,
#next {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  padding: 0 10px;
  background-color: purple;
}

#title,
#footer {
  text-align: center;
}

#title {
  background-color: blue;
}

#footer {
  background-color: red;
}

<div id="mainContainer">
  <div id="title">TITLE</div>
  <div id="imageContainer">
    <div id="previous">&lt;</div>
    <img id="image" src="https://via.placeholder.com/1920x1080" />
    <div id="next">&gt;</div>
  </div>
  <div id="footer">FOOTER</div>
</div>

Answer 1

将此添加到您的代码中：

#image {
  width: 40px;
  flex-grow: 1; /* new */
}

通常，您可以使用flex-basis（在这种情况下相当于width），并执行以下操作：

#image {
  flex: 1; /* fg:1, fs:1, fb:0 */
}

或

#image {
  flex: 1 0 40px; 
}

但是，某些浏览器存在一个错误，导致它们忽略 嵌套 flex 容器中的flex-basis。所以width / flex-grow 组合是一个干净的解决方法。

有关更多详细信息，请参阅我的答案中的“浏览器错误”部分：

• What are the differences between flex-basis and width?

---

下面的演示通过将图像包装在 div 中并在图像上使用绝对定位和object-fit 来涵盖上面回答的问题以及高度问题（纵横比和垂直滚动）。

在 Chrome、Firefox 和 Edge 中测试。

#mainContainer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  color: white;
}

#imageContainer {
  flex: 1;
  display: flex;
  justify-content: space-between;
  background-color: green;
}

#image {
  flex-grow: 1;
  position: relative;
}

img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#previous,
#next {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  padding: 0 10px;
  background-color: purple;
}

#title,
#footer {
  text-align: center;
}

#title {
  background-color: blue;
}

#footer {
  background-color: red;
}

<div id="mainContainer">
  <div id="title">TITLE</div>
  <div id="imageContainer">
    <div id="previous">&lt;</div>
    <div id="image">
      <img src="https://pixabay.com/get/52e3dc454f50a414f6d1867dda6d49214b6ac3e45657744e7d2b72dc90/oldtimer-4396528_1920.jpg" />
    </div>
    <div id="next">&gt;</div>
  </div>
  <div id="footer">FOOTER</div>
</div>

jsFiddle

Answer 2

使用object-fit 属性指定如何调整图像大小以适应其容器。我已将其设置为object-fit: cover，它将切断图像的两侧，保留纵横比，并填充空间。也可以使用flex-grow:1 填充“绿色”空间。

#mainContainer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  color: white;
}

#imageContainer {
  display: flex;
  justify-content: space-between;
  background-color: green;
}

#image {
  object-fit: cover;
  flex-grow: 1;
  height: 100%;
  overflow: hidden;
}

#previous,
#next {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  padding: 0 10px;
  background-color: purple;
}

#title,
#footer {
  text-align: center;
}

#title {
  background-color: blue;
}

#footer {
  background-color: red;
}

<div id="mainContainer">
  <div id="title">TITLE</div>
  <div id="imageContainer">
    <div id="previous">&lt;</div>
    <img id="image" src="https://via.placeholder.com/1920x1080" />
    <div id="next">&gt;</div>
  </div>
  <div id="footer">FOOTER</div>
</div>

Answer 3

您可以calc 基于垂直宽度 (100vw) 的宽度并删除您的 PREV/NEXT 的填充 像这样？

#mainContainer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  color: white;
}

#imageContainer {
  flex: 1;
  display: flex;
  justify-content: space-between;
  background-color: green;
}

#image {
  width: calc(100vw - 50px);
  height: 100vh;
}

#previous,
#next {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  padding: 0 10px;
  background-color: purple;
}

#title,
#footer {
  text-align: center;
}

#title {
  background-color: blue;
}

#footer {
  background-color: red;
}

<div id="mainContainer">
  <div id="title">TITLE</div>
  <div id="imageContainer">
    <div id="previous">&lt;</div>
    <img id="image" src="https://via.placeholder.com/1920x1080" />
    <div id="next">&gt;</div>
  </div>
  <div id="footer">FOOTER</div>
</div>