将图像调整为自动调整大小的儿童

Question

我有一个非常奇怪的问题,我在过去的两天里一直试图解决这个问题但无济于事.我正在构建的页面具有以下结构:

我可以很容易地实现AB布局,整体父母拥有display: flex; flex-direction: column; align-items: stretch并设置A为flex: 0 0 auto和Bflex: 1 1 0; min-height: 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块的宽度减小到仅包含缩小的图像 - 并且C块占据剩余的宽度.

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