1

描述这一点的最简单方法是在这里参考我的小提琴：

编辑：有错误的小提琴链接，但这是正确的：

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

我想要一个小图像的动态列表，以覆盖固定高度区域内的视口，该区域从一侧到另一侧覆盖整个浏览器窗口。问题是图像在它们完全需要的空间（在我的示例中为 100 像素）之前不会显示。

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

让我知道我是否可以澄清。

有什么想法吗？

4

1 回答 1

1

超大包装

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

更新的演示

CSS

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

HTML

<div class="dynamic">
    <div class="wrapper">
        ...
    </div>
</div>
于 2013-04-04T19:55:18.723 回答