CSS布局：移动、垂直布局、页眉（固定高度）、页脚（固定高度）。如何使用img填充剩余空间，高度受限

Question

布局：移动，垂直布局，页眉（固定高度），页脚（固定高度）。如何用img填充剩余空间，限制高度

这是我在iOS上非常常见的布局。试图理解如何在CSS中做到这一点。

以下是我正在尝试的：

使用flexbox和flex-direction列设置页眉和页脚的高度（或可以使用flex-basis完成）页眉和页脚的flex-shrink:0，这样它们就不会在图像容器上收缩flex-shrink:1，所以如果需要，它会在图像对象拟合：缩小时将最大宽度和最大高度设置为100%，从而保持图像的纵横比（这意味着将有水平杆或垂直杆）

问题：图像会缩小以适应宽度，但缩小幅度应大于宽度以适应可用的垂直空间

超文本标记语言

<div class='container'>
  <div class='header'>
    Header
  </div>
  <div class='content'>
    <div class='image-container'>
      <img class="cat" src="https://jngnposwzs-flywheel.netdna-ssl.com/wp-content/uploads/2019/05/Transparent-OrangeWhiteCat-764x1024.png"/>
    </div>
  </div>
  <div class='footer'>
    Footer
  </div>
</div>

CSS

.container {
  background-color: #aaa;
  height: 400px;
  width: 175px;
  display: flex;
  flex-direction: column;
  border: 2px solid blue;
}

.box {
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box1 {
  height: 100px;
  flex-shrink: 0;
}

.box2 {
  flex-shrink: 1;
}

.cat {
  max-width: 100%;
  max-height: 100%;
  object-fit: scale-down;
  border: 2px solid orange;
}

.box3 {
  height: 100px;
  flex-shrink: 0;
}

https://codepen.io/jeffrey-robert/pen/yLbNVZp

Answer 1

如果使用对象拟合，则技巧是设置为img：高度：0；最小高度：100%；宽度：100%并且应该填充flex子框，子框需要flex grow:1 太多，无法填充剩余空间。

.container {
  background-color: #aaa555;
  height: 400px;
  width: 175px;
  display: flex;
  flex-direction: column;
  border: 2px solid blue;
}

.box {
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box1 {
  height: 100px;
  flex-shrink: 0;
}

.box2 {
  flex:1 1 auto;
}

.cat {
  width: 100%;
  height:0;
  min-height:100%;
  object-fit: scale-down;
  border: 2px solid orange;
}

.box3 {
  height: 100px;
  flex-shrink:1;
}

html lang-html prettyprint-override"><div class="container">
  <div class="box box1">
    1
  </div>
  <div class="box box2">
    <img class="cat" src="https://jngnposwzs-flywheel.netdna-ssl.com/wp-content/uploads/2019/05/Transparent-OrangeWhiteCat-764x1024.png"/>
  </div>
  <div class="box box3">
    3
  </div>
</div>