最大可能的尺寸图像和div展开以填充空间
我确信之前已经询问过这个问题，但我无法找到确切问题的答案。
我想要一个非常简单的布局：
-------------------
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>我已经编辑了你的解决方案的代码是你想要的吗？ 我不确定..
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);
}
再次，我很抱歉，如果这不是你要找的，但这个线程很难浏览。
这个例子使用了float概念：
肖像图像：
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
.header {
width: 100%;
height:8vh;
border: 1px solid #aaa;
}
.main-content {
width: 100%;
border: 1px solid #aaa;
padding: 0px;
}
.main-content > .left {
float: left;
width: 50%;
}
.main-content > .right {
float: right;
width: 50%;
}
.main-content > div {
min-height: 50%;
max-height: 90%;
}
.main-content > .right > img {
max-width: 100%;
max-height: 90vh;
}
.main-content:after,
.main-content:before {
display: table;
clear: both;
content: "";
}<div class="header">
Some Header stuff..
<br>
</div>
<div class="main-content">
<div class="left">
Somehitng on the left
</div>
<div class="right">
<img src="https://s-media-cache-ak0.pinimg.com/236x/41/89/8c/41898cae6d9edd8737dfef07ab50ea57.jpg" />
</div>
</div> flex: 1因素
在您的grid__row flex容器中，它是行方向的，两个flex项目 - grid__item和img - 每个都应用flex: 1 。
这意味着这两个项目将在容器中均匀分配容器中的可用空间。 换句话说，50/50，就像你的插图。
我的建议：从img删除flex: 1 。
由object-fit: contain产生的空白object-fit: contain
使用object-fit: contain图像的高宽比保持不变，并且适合框内的比例。
因此，左侧和/或右侧（纵向适合）或顶部和/或底部（横向适合）可能会有空白。
这可能是您看到图像左侧和右侧的“填充”空间的原因。
如果你尝试cover ，所有的空间都会被使用，但是有裁剪（ 演示 ）。
以下是关于object-fit的更多信息：https://stackoverflow.com/a/37127590/3597276
overflow: hidden效果
关于你的评论：
... overflow = hidden（我不明白它在做什么，但是如果我把它放在外面，img容器会水平扩展2倍）。
这很可能是由于Flex项目的最小规模算法。
默认情况下，Flex项目不能小于其内容的大小。
但是，可以用overflow: hidden覆盖此功能。
更多细节在这里： 为什么Flex项目收缩过去的内容大小？
链接地址: http://www.djcxy.com/p/94463.html上一篇: Maximum possible size image and div expanding to fill the space