html - 最大可能尺寸图像和 div 扩展以填充空间

Question

我确定之前有人问过这个问题，但我找不到确切问题的答案。

我想要一个非常简单的布局:

-------------------
      header
-------------------
         |
 content | graphic
         |
-------------------

哪里:

• 页眉高度由字体大小设置；
• 内容有固定的最小宽度；
• 考虑到这两个限制并保持宽高比，图形尽可能大(即它的高度将与屏幕一样高减去标题，除非这会使内容面板太窄)；
• 考虑到这三个限制，内容尽可能广泛。

[编辑添加:]

• 垂直:当宽度+纵横比约束导致图像小于最大高度时，图像垂直居中
• 水平:图像始终紧贴屏幕右侧(任何手动添加的填充除外)，内容始终向右向上延伸到图像的左侧(也除了任何手动添加的填充)。

我尝试过使用 flexboxes 并满足了前三个约束，但我无法让内容 Pane 水平增长以填充图像未使用的空间。我得到的最好结果是使用下面的 HTML 和 CSS，但是，正如您在下面的屏幕截图中看到的，这导致内容 div 和图像占用相同的大小，而不是内容 div 将图像推到右边. (这是在两者上都设置 flex=1 的预期行为，所以我没想到它会起作用；但至少这让我的图像大小表现得像我想要的那样)。

我正在使用的是 https://jsfiddle.net/uv566jc3/ :

.grid {
  border: solid 1px #e7e7e7;
  height: 95vh;
  display: flex;
  flex-direction: column;
}
.header {
  flex: 0;
}
.grid__row {
  flex: 1;
  display: flex;
  flex-direction: row;
}
.grid__item {
  flex: 1;
  padding: 12px;
  border: solid 1px #e7e7e7;
}
img {
  flex: 1;
  object-fit: contain;
  overflow: hidden;
  border: solid 1px #e7e7e7;
}

<div class="grid">
  <div class="header">Some header stuff
  </div>
  <div class="grid__row">
    <div class="grid__item">1</div>
    <img id="pic" src="https://s27.postimg.org/oc7sozu7n/clouds.png">
  </div>
</div>

• 网格样式为包含标题和grid__row的列方向的flexbox；
• header 的 flex 为 0，即高度由内容设置；
• grid__row 的 flex 为 1，即填充标题后剩余的高度；也是一个包含 grid__item 和 img 的行方向的 flex 容器。
• grid__item 具有 flex 1，即填充可用宽度；
• img 有 flex 1 并使用 object-fit = 1(它获取我需要的图像大小调整属性)和 overflow=hidden(我真的不明白它在做什么，但如果我把它放在外面，img 容器会扩展水平乘以 2 倍)。

我没有在 jsfiddle 中的 grid__item 项上明确设置最小宽度，但我预计这不会产生任何影响。

有没有一种简单的方法可以在 CSS 中得到我想要的东西？如果这是重复的，我们深表歉意。

Answer 1

我已经编辑了代码，您的解决方案是您想要的吗？我不确定..

https://jsfiddle.net/vjLps7qs/6/

它变成了:

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

  .top {
    height: 1.25em;
    padding: 3px;
    background: yellow;
    display: flex;
    flex-direction: row;
  }

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

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

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

添加了 calc，由 all major browsers 支持

  .right {
    calc(100% - 1.25rem);
    top: calc(50% - 1.25rem);
  }

再次重申，如果这不是您要找的内容，我深表歉意，但这个帖子很难导航。