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

Question

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

这是我在 iOS 上很常见的布局。试图了解如何在 CSS.

中做到这一点

这是我正在尝试的：

使用带有 flex-direction 列的 flexbox 设置页眉和页脚的高度（或者可以用 flex-basis 来完成） flex-shrink：页眉和页脚为 0，因此它们不会收缩 flex-shrink: 1 在图像容器上，因此它会在需要时收缩将图像上的最大宽度和最大高度设置为 100% object-fit：缩小以保持图像的纵横比（这意味着会有水平条或垂直条）

问题：图像缩小以适应宽度，但应该缩小得更多以适应可用的垂直方向 space

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

Answer 1

如果你使用 object-fit，那么技巧就是设置为 img :height:0;min-height:100%;width:100% 它应该填充 flex 子框，子框 将require flex-grow:1; too to fill the remaing space.

.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;
}

<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>

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

CSS Layout: Mobile, Vertical Layout, Header (fixed height), Footer (fixed height). How to fill remaining space with img, constrained on height & width

html

css

layout

image

flexbox