Макет CSS: мобильный, вертикальный макет, верхний колонтитул (фиксированная высота), нижний колонтитул (фиксированная высота). Как заполнить оставшееся пространство img, ограниченным по высоте и ширине

Question

Макет: Мобильный, Вертикальный макет, Верхний колонтитул (фиксированная высота), Нижний колонтитул (фиксированная высота). Как заполнить оставшееся пространство с помощью img, ограниченного по высоте и ширине

Это очень распространенный макет для меня на iOS. Пытаюсь понять, как это сделать в CSS.

Вот что я пытаюсь сделать:

Использование flexbox со столбцом flex-direction Установка высоты верхнего и нижнего колонтитула (или можно сделать с помощью flex-basis) flex-shrink: 0 для верхнего и нижнего колонтитула, чтобы они не сжимались flex-shrink: 1 для контейнера изображения, чтобы оно сжималось при необходимости Установка максимальной ширины и максимальной высоты на 100% на изображении object-fit: уменьшение масштаба, чтобы сохранялось соотношение сторон изображения (это означает, что будут горизонтальные или вертикальные полосы)

Проблема: изображение сжимается по ширине, но должно сжиматься еще больше, чтобы соответствовать доступному вертикальному пространству

HTML

<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

Ответы (1)