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

Question

我确信以前曾经问过,但我找不到确切问题的答案.

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

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

哪里:

• 标题高度由字体大小设置;
• 内容具有固定的最小宽度;
• 考虑到这两个约束并保持纵横比,图形尽可能大(即它将与屏幕一样高,减去标题,除非这会使内容面板太窄);
• 考虑到这三个限制,内容尽可能宽.

[编辑添加:]

• 垂直:当宽度+宽高比约束导致它比最大高度短时,图像垂直居中
• 水平:图像总是很难对着屏幕的右侧(除了任何手动添加的填充),内容总是一直向上到图像的左侧(除了任何手动添加的填充之外).

我已经尝试过使用flexbox并且满足前三个约束,但是我无法让内容窗格水平增长以填充图像未使用的空间.我得到的最好的结果是使用下面的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>

• 网格样式是包含header和grid__row的列方向的flexbox;
• header有flex 0,即height由内容设置;
• grid__row具有flex 1,即填充标题后留下的高度; 也是行方向的flex容器,包含grid__item和img.
• grid__item有flex 1,即填充可用的宽度;
• img有flex 1并且使用object-fit = 1(它获取我需要的图像大小调整属性)和overflow = hidden(我真的不明白它在做什么,但是如果我把它留下来,img容器会水平扩展因子2).

我没有在jsfiddle中的grid__item项目上明确设置min-width,但我不认为有任何区别.

有没有一种简单的方法来获得我想要的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，所有主流浏览器都支持

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

再次，如果这不是您想要的，我很抱歉，但该线程很难导航。