Html 响应图像栅格，水平和垂直占据全部剩余视口空间

我对响应性设计不是很精通，我似乎无法找到所需目标的解决方案。这是我想要的布局模型：

现在，我们的目标是让图像无缝隙地放入图像网格容器中。这个容器应该占据浏览器视口最右边和最底部的全部剩余空间，但不会超过它，所以我们没有任何滚动条。所有图像的尺寸都相同

行-列分布取决于视口大小和图像尺寸，以防止不必要的扭曲。当视口大小达到特定的断点时，此比率将发生变化，但在断点之间，图像将通过比例缩放进行微调

断点是通过媒体查询来管理的，网站也必须是移动友好的。我不能用“vh”解决这个问题

我主要是寻找最轻的实现，所以纯CSS解决方案将是理想的。我听说过JS库和派生库，但我还没有机会使用它

---

任何关于这个主题的帮助都将不胜感激。

使用百分比

宽度和
媒体查询来垂直填充视口很容易，这里的问题是填充视口高度

CSS中总是有
height:X%
，但它只适用于具有固定高度的父级中的元素，而固定高度的元素响应性不强但是：

介绍视口单位：
1vh
等于视口高度的1%，因此
50vh
填充了一半视口，而
100vh
等于视口的全高。视口宽度还有
vw
单位


填充视口高度：
如果包装器元素具有
高度：100vh
，则它将填充整个视口高度，并允许其子元素使用
高度：X%

例如，如果父元素具有
高度：50vh
，而其子元素具有
高度：50%
，则子元素的高度将等于视口高度的25%

在模型中，您可能希望在包含导航和主区域的包装器元素上使用
height:100vh
，然后将主元素的
height
设置为小于100%的值，以便为导航元素腾出空间。然后，将图像（或图像容器）的高度设置为您认为合适的百分比

最后，通过
媒体查询更改所述图像/图像容器的百分比
高度
，以查找客户端的视口高度（以像素为单位设置）

（请注意，当百分比以半个像素结束时，浏览器有时很难呈现内容，因此您可能希望使用稍低的值，例如24.99%，而不是25%，以避免这些舍入错误）

另一个问题出现了：
这样做的话，你可能会发现你的图片被放大了。我没有解决这个问题的书面解决方案，但您应该能够将图像设置为
背景图像
，并改为调整这些元素的大小

如果需要图像作为
元素，则需要找到其他解决方案

我希望这能提供一些见解。
纯CSS最接近Flexbox，但浏览器支持仅限于支持换行的浏览器（请参阅：，IE10是唯一支持部分换行的浏览器）。目前，该列表仅限于IE10、Opera和Chrome


假设您的标记如下所示：

<header>
  Header
</header>

<nav>
  Nav
</nav>

<main>
  <figure>
    <img src="http://placekitten.com/200/200" width="200" height="200" />
    <figcaption>What a cute kitten</figcaption>
  </figure>

  <figure>
    <img src="http://placekitten.com/200/200" width="200" height="200" />
    <figcaption>So adorable!</figcaption>
  </figure>

  <figure>
    <img src="http://placekitten.com/200/200" width="200" height="200" />
    <figcaption>Irresistibly cuddly</figcaption>
  </figure>
</main>

body {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@supports (flex-wrap: wrap) {
  body {
    display: flex;
  }
}

header {
  background: yellow;
  -webkit-flex: 1 100%;
  -ms-flex: 1 100%;
  flex: 1 100%;
}

nav {
  background: orange;
  -webkit-flex: 1 15em;
  -ms-flex: 1 15em;
  flex: 1 15em;
}

main {
  -webkit-flex: 3 30em;
  -ms-flex: 3 30em;
  flex: 3 30em;

  /* everything below this line is all that really matters
   * everything above this line is controlling the main layout */
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@supports (flex-wrap: wrap) {
  main {
    display: flex;
  }
}

figure {
  display: inline-block; /* fallback for old browsers */
  /* note that the images are 200px wide, this has to match or Chrome does weird stuff */
  -webkit-flex: 1 200px;
  -ms-flex: 1 200px;
  flex: 1 200px;
}

figure img {
  min-width: 100%;
  height: auto;
}

对于移动设备，一旦缩放到导航不再位于侧面的位置，您就可以安全地使用媒体查询来控制图像的大小：


您请求的问题是图像无法缩放（通过
max width:100%；height:auto
），除非它们的容器宽度感谢您的编辑，非常感谢您，并且花时间提供了答案。我打算以任何一种方式使用媒体查询，因为它必须适应不同的设备。这整件事对我来说还是有点不清楚，我想我会在这过程中即兴发挥。还有，快速提问。。为什么我不能对你的评论投赞成票？@user1344799你解决了这个问题吗？你确实提供了很多见解，我从来都不知道vh和vw公司的存在。另外，caniuse是一个很棒的网站，我相信它在不久的将来会对我有好处。vh设备的使用似乎非常明显和直观，但据caniuse称，我目前意识到的主要问题是不支持android浏览器。这是一个大问题，因为网站必须是移动友好的。一旦我得到足够的支持，我会投票给你，但我还不能接受你的答案。我并没有明确指出该网站必须适应手机，所以你们不这么认为是可以理解的。
figure {
  display: inline-block;
}

figure img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 40em) {
  figure {
    width: 30%;
  }
}

@media (max-width: 30em) {
  figure {
    width: 45%;
  }
}

@media (max-width: 20em) {
  figure {
    width: 100%;
  }
}