html - 使图像适合自动调整大小的 flex 子项

Question

我遇到了一个非常特殊的问题，过去 2 天我一直在尝试解决，但无济于事。我正在构建的页面具有以下结构:

我可以轻松实现 A-B 布局，整个父级具有 display: flex; flex 方向:列； align-items: stretch 并将 A 设置为 flex: 0 0 auto 并将 B 设置为 flex: 1 1 0;最小高度:100px;

但是，我在 B 中布局 C 和 D 时遇到了真正的麻烦。我觉得 flex/row 是 B 的正确方法，但我无法获得具体细节。所以我正在尝试:

.B {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
}

.C {
    flex: 1 1 0;
}

.D {
    object-fit: scale-down;
}

但显然这还不够。如果我将图像设置为还具有最小宽度的 flex: 1 1 0，图像要么根本不缩小，要么缩小但扭曲，要么在周围留下很多空间。

我有什么想法可以在这里实现我所需要的吗？

更新:我尝试将 jsfiddle 放在一起 - https://jsfiddle.net/2gsrzwwq/3/ - 但出于某种原因，它甚至不会尊重父级的 height:100%。就图像拟合而言，我需要将图像缩小到 D div 的高度，然后让 D block 的宽度减小以仅包含缩小后的图像 - C block 占据剩余的宽度。

Answer 1

经过更多的努力和又一个不眠之夜，我想出了一些可行的方法。我必须做出的牺牲是不调整图像容器的宽度，并始终将其设置为屏幕宽度的一半(请注意，在真正的应用程序中，没有背景颜色，所以它看起来不会很奇怪，而是会有一些额外的空白)。我将不得不与客户讨论这个问题，但我认为我能够说服他们。这是我想出的:

https://jsfiddle.net/2gsrzwwq/6/

HTML:

<div class="page">
  <div class="A">
  </div>

  <div class="B">
    <div class="C">
    </div>
    <div class="D">
      <img src="http://res.freestockphotos.biz/pictures/10/10677-illustration-of-a-red-lobster-pv.png"/>
    </div>
  </div>
</div>

CSS:

div {
  box-sizing: border-box;
}

.page {
  width: 100%;
  height: 250px;
  border: solid 1px black;
  margin: 5px;
  background-color: lightYellow;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.A {
  background-color: lightPink;
  margin: 5px;
  flex: 0 0 50px;
}

.B {
  background-color: lightBlue;
  margin: 5px;
  flex: 1 1 0;
  min-height: 80px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between
}

.C {
  background-color: lightGreen;
  margin: 5px;
  flex: 1 1 0;
  min-width: 100px;
}

.D {
  background-color: lightGrey;
  margin: 5px;
  flex: 1 1 0;
  min-height: 50px;
  display: flex;
  justify-content: flex-end;
}

.D img {
  flex: 1 1 0;
  max-height: 100%;
  max-width: 200px;
  object-fit: scale-down;
  object-position: top right;
}