全高方形图像（FF/Safari）

Question

我希望实现一个包含方形图像的全高（无滚动）布局。 根据容器的可用高度，图像的宽度应相应缩放。

到目前为止，我已经尝试使用浮动和 flexbox 来实现布局，但是任何解决方案（包括此处对类似问题的任何回应）要么导致图像/容器与右侧的附加内容重叠，要么不' 不按预期计算 100%（例如通过包含标题的高度）。

我最近的尝试是这样的：

body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
}

.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  background: #D8D8D8;
}

.header {
  background: #FF9C9C;
  padding: 5px;
}

.content {
  display: flex;
  height: 100%;
}

.image-container {
  border: 1px solid #7100FF;
  height: 100%; 
}

img {
  display: block;
  height: 100%;
  width: auto;
}

.aside {
  background: #B6F0C7;
  flex: 1 1 auto;
}

<div class="page">
  <div class="header">
    Header
  </div>
  <div class="content">
    <div class="image-container">
      <img src="http://placehold.it/100x100" alt="Card image">
    </div>
    <div class="aside">
      <p>Other content</p>
    </div>
  </div>
</div>

https://jsfiddle.net/s0846ozy/

我使用 CSS 已经有好几年了。期待在我的方法中指出一个相当明显的缺陷。谢谢！

编辑：

1. 看来这个问题是特定于浏览器的。我使用的是最新的 Firefox。
2. 据我所知，object-fit 无法解决问题，而且我已经探索过了。
3. 我添加了一个 JSFiddle 以便于进行实验。

---

Chrome（预期）：

Firefox（实际）：

Answer 1

使用这个：

img {
  object-fit: cover;
}

为了保持纵横比！！