html - 使多个图像覆盖整个视口(viewport)，如 css 重复

Question

最简单的描述方式是引用我的 fiddle :

编辑:有错误的 fiddle 链接，但这是正确的:

http://jsfiddle.net/b3rgstrom/k7qq4/2/

这是我的 CSS:

.dynamic {
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  height: 200px;
  width: 100%;
}
.dynamic img{
  margin: -2px;
}

.repeat {
  position: relative;
  background-repeat: repeat;
  background: url("http://placehold.it/100x100");
  width: 100%;
  height: 200px;
  overflow: hidden;
  margin-top: 30px;
}

我想要一个动态的小图像列表来覆盖固定高度区域内的视口(viewport)，从一侧到另一侧覆盖整个浏览器窗口。 问题是图像只有在它们拥有完全需要的空间后才会显示，在我的示例中是 100 像素。

如果我拍摄一张图像并重复，它会根据需要显示尽可能多的图像以从一侧到另一侧覆盖整个屏幕，这就是我想要完成的。

让我知道是否可以澄清。

有什么想法吗？

Answer 1

超大 wrapper

在 .dynamic 中添加一个宽度两倍的包装器。这样，图像就位于一个宽度足够大的元素中。 .dynamic 上的 overflow:hidden 可防止额外的宽度触发水平滚动条。

Updated demo

CSS

.dynamic {
    width: 100%;
    overflow: hidden;
}
.dynamic .wrapper {
    width: 200%;
}

HTML

<div class="dynamic">
    <div class="wrapper">
        ...
    </div>
</div>