固定比率列CSS拼图

Question

我正在努力为这种情况解决问题。我有一个固定的高度标题（没有问题）。在下面我有两个并排的块。

这些块应该从页眉到页脚（有一个小的边距）。

我希望第一个块的最小宽度为浏览器宽度的25％。第二个块的纵横比应为4：3。在大多数情况下，应该能够通过将第一列扩展到25％来实现这一目标。

如果第一个区块的宽度不能缩小到25％以下，则右侧区块仍应为4：3，但在视图中垂直居中。

这只能用CSS吗？我需要支持现代浏览器和IE 10。

由于

Answer 1

您可以使用以下代码：

＆＃13;

＆＃13;

header {
  height: 50px;
}
.container {
  display: block;
  height: 100vh;
  width: 100%;
  display: table;
}

.left-block {
  height: 100%;
  min-width: 25%;
  width: 25vw;
  background: yellow;
}
.left-block,
.right-block {
    display: table-cell;
    vertical-align: middle;
}
.right-content {
    background: blue;
    width: 74vw;
    height: calc(75vw * .75);
}

＆＃13;

<header>
    header
</header>
<div class="container">
    <div class="left-block">left content</div>
    <div class="right-block"><div class="right-content">right content</div></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在黄色块上使用vw css单位和min-width应该可以满足您的需求。很难说出一个小提琴或编码器来查看你的实际代码。

min-width: 25vw;
width: 25%;

对于比例为4：3的蓝色区域，您可以再次使用vw css单位作为宽度，并使用calc function作为高度。

width:75vw;
height: calc(75vw * .75);