Question

我正在尝试创建一个全宽和全高图像网格。这就是我目前所拥有的：Codepen。

我正在努力应对视口的可变高度。

有没有办法做到这一点？

除了我的代码之外，编辑还强迫我写一些更多的文本，我不知道为什么，但我必须这样做。真奇怪！

html, body, ul {
  height: 100%;
}

ul {
  background-color: blue;
}

a {
  line-height: 0;
  display: block;    
}

li {
  float: left;
  width: 16.66%;
  opacity: 0.3;
}

img {
  width: 100%;
}

ul li:hover {
  opacity: 1;
}

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="test.css">
  </head>
  <body>

    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

  </body>
</html>

Answer 1

我明白你要做什么。

ol, ul {
list-style: none;
overflow: hidden;

}

overflow:hidden将隐藏超出元素高度100％的任何内容。

http://codepen.io/anon/pen/XJOPOy

如果你用一些javascript使它变得动态，这会更好用，也会更通用，但只要你包含足够的图像元素，这样就可以正常工作并且能够填充大多数屏幕。

Answer 2

我自己找到了一个解决方案：

问题是，我必须使用CSS-Background-Images而不是img-Tag来用我的图像填充整个li-Element。

Codepen

HTML：

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

CSS：

html, body, ul {
    width: 100%;
    height: 100%;
}

li {
    width: 25%;
    height: 25%;
    float: left;
    background: url(http://placehold.it/300x150);
    background-size: cover;
    background-position: center center;
}

全高/宽图像网格

2 个答案: