响应式图像网格，水平和垂直占用全部剩余视口空间

Question

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

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

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

断点通过媒体查询进行管理，并且网站也必须适合移动设备。我不能为此使用 'vh' 解决方案。

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

我们将不胜感激任何有关该主题的帮助。

Answer 1

垂直填充视口很容易使用百分比width 和media-queries，这里的问题是填充视口高度。

在 CSS 中总是有 height: X%，但它只适用于具有固定高度的父元素内的元素，并且固定高度不是很敏感。 但是：

介绍视口单位：

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

Browser support for viewport units.

填充视口高度：

如果你的包装元素有height: 100vh，那么它将填充整个视口高度并且允许它的子元素使用height: X%。

例如，如果父元素具有height: 50vh，其子元素具有height: 50%，则子元素的高度将等于视口高度的25%。 Example of this.

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

最后，通过media-queries 设置更改上述图像/图像容器的百分比height 以查找客户端的视口高度（以像素为单位）。

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

又一个问题出现了：

这样做，您可能会发现您的图像不成比例。我没有对此的书面解决方案，但您应该能够将图像设置为 background-image 并将 background-size: cover 修复为一个元素，然后调整这些元素的大小。

如果您需要将图像作为 <img> 元素，则需要找到其他解决方案。

我希望这能提供一些见解。

Answer 2

最接近纯 CSS 的是 Flexbox，但浏览器支持仅限于那些支持 wrapping 的浏览器（请参阅：http://caniuse.com/flexbox，IE10 是唯一一个部分支持具有 wrapping 的浏览器）。目前该列表仅限于 IE10、Opera 和 Chrome。

http://codepen.io/cimmanon/pen/fqoxj

假设您的标记看起来像这样：

<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>

CSS 应该是这样的：

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;
}

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

http://cssdeck.com/labs/l2hw4aon

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%;
  }
}