响应式图像网格，可以在水平和垂直方向上获取完整的剩余视口空间

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％的值以腾出空间用于导航元素。然后，将图像（或图像的容器）的高度设置为您认为合适的百分比。

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

（请注意，当百分比最终为半个像素时，浏览器有时难以呈现内容，因此您可能需要使用稍低的值，例如24.99％而不是25％来避免这些舍入错误）

出现了另一个问题：

这样做，你可能会发现你的图像不成比例。我没有这方面的书面解决方案，但您应该可以将图像设置为background-image background-size: cover并将其设置为元素并调整其大小。

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

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

Answer 2

使用纯CSS可以获得的最接近的是Flexbox，但浏览器支持仅限于支持包装的那些（请参阅：http://caniuse.com/flexbox，IE10是唯一具有部分支持的浏览器有包装）。目前该列表仅限于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%;
  }
}