Question

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

我可以轻松实现A-B布局，整体父级为display: flex; flex-direction: column; align-items: stretch，A设为flex: 0 0 auto，B为flex: 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块占据剩余的宽度。 / p>

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

Answer 2

我自己也在努力解决同样的问题：

Maximum possible size image and div expanding to fill the space

我提出了以下解决方案，我也提供了这个解决方案来回答我自己的问题。看到 https://jsfiddle.net/wwhyte/vjLps7qs/;用http://placekitten.com/1600/900替换图像以查看横向行为。

CSS：

  .container {
    width: calc(100vw);
    height: 100vh;
    overflow: hidden;
  }

  .top {
    height: 1.25em;
    background: yellow;
  }

  .innerCtr {
    height: 100%;
    overflow: hidden;
  }

  .left {
    height: 100%;
    background: red;
    overflow: hidden;
  }

  .right {
    max-height: 100%;
    max-width: 80%;
    background: blue;
    float: right;
    object-fit: contain;
    overflow: hidden;
    position: relative;
    top: 50%;
    transform: translateY(-52%) scale(0.95);
  }

HTML：

<div class="container">
  <div class="top">
  </div>
  <div class="innerCtr">
    <img class="right" src="http://placekitten.com/1600/900">
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
  </div>
</div>

我认为正在发生的事情是：

在正确的班级：
- max-height，max-width和object-fit为我提供了我需要的缩放。
- float：right给出我需要的位置。（我从昨天发现的一篇文章中得到了这个，但现在丢失了，如果我重新找到它，我会编辑这个答案以提供归属信息。）
- 转换的灵感来自垂直对齐的文章：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/。
- 95％比例提高了图像的可见度。
在左侧班级中，身高：100％给出了我想要的面板尺寸
innerCtr类为图像提供父级以计算其高度
容器类使视口适合浏览器窗口。

即使这不是很理想。顶栏的高度与图像的高度之间存在一些奇怪的相互作用，因此图像的底部被推出显示器。推出的数量小于但与顶杆的高度有关 - 我还没有完全调查过。如果你删除顶部栏，上面的CSS表现完美。我用95％的比例和对Y变换稍作调整来解决这个问题，但是在小窗口尺寸下这仍然表现不正确 - 图像不是完全垂直居中的。我原以为在容器类上设置height = calc（100vh-1.25em）可能会解决这个问题，但实际上它会破坏图像的垂直缩放，所以它现在只能水平缩放。这是完全意外行为！但除此之外，这符合我的需求。

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

2 个答案: