html - Flexbox，在可用空间内限制图像的高度/宽度

Question

我有一个固定大小的包装器，包括:

• 标题的大小适合里面的内容
• 固定大小的页脚
• 应该使用包装器剩余空间的内容容器

图像出现问题。我希望图像调整大小以适应内容容器的高度和宽度。现在图像在高度上溢出了 wrapper 。

这是代码。宽图像表现正确，调整大小以适合，但长长颈鹿不是。在下面的 fiddle 中，溢出设置为滚动调试。最终目标是没有溢出。 https://jsfiddle.net/sghp68r0/

一个不太灵活的解决方案就是简单地给 imageFit 类一个高度，比如

img {
  max-width: 100%;
  max-height: 100%;
}
.imageFit {
  object-fit: contain;
  height: 150px;
}

但我宁愿避免对高度进行硬编码。

我的目标是它看起来像这样(没有溢出):

Answer 1

如果我是对的，你想要这个。请务必告诉我。

在 fiddle 中拖动高度，您会看到图像正在随高度调整。

这是我的 fiddle 链接:-

https://jsfiddle.net/exa3y7w9/

<div class="wrapper">
  <div class="header">
    Sized to content <br />
    Sized to content <br />
  </div>
  <div class="content">
    <div class="imageWrapper">
      <img src="https://cdn.pixabay.com/photo/2017/10/10/22/24/wide-format-2839089_960_720.jpg">
    </div>
    <div> 2 images and some text that fills remaining space </div>
    <div class="imageWrapper">
      <img src="http://clipart-library.com/data_images/258951.jpg">
    </div>
  </div>
  <div class="footer">
    There is some text in fixed size container
  </div>
</div>