如何使用CSS实现瀑布流布局，使图片能够根据容器大小自适应并保持中间无间隙？

使用CSS实现瀑布流布局，可以利用Flexbox或Grid布局来达成。这里分别介绍两种方法：

**使用 Flexbox:**

.container {
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
}

.item {
  flex: 1 0 calc(33.33% - 20px); /* 1/3 宽度，减去间距 */
  margin: 10px; /* 间距 */
  box-sizing: border-box; /* 包含边框宽度，确保内边距不会影响元素的实际尺寸 */
}

在这里，`.container`是包含所有`.item`的容器，`.item`每个占据容器的1/3宽度，并且左右有20px的间隔。`flex-basis: calc(33.33% - 20px)`会使元素自动调整大小以适应容器。

**使用 CSS Grid:**

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 最小宽度250px，剩余空间平均分配 */
  gap: 10px; /* 间距 */
}

.item {
  background-color: #f8f9fa;
  padding: 20px;
  box-sizing: border-box;
}

这里的`.container`采用网格布局，`grid-template-columns`设置了列的数量，`auto-fit`表示按需创建列，`minmax(250px, 1fr)`表示每列最小250px宽，剩余空间均分。`.gap`设置列与列之间的间距。

这两种方法都能让图片根据容器大小自适应并保持中间无间隙。为了使图片适应，你需要为`.item`或对应的`img`元素设置合适的宽度和高度，比如通过CSS `max-width: 100%; max-height: auto;`。