在 Vue 中，我们可以使用 CSS grid 或者 flexbox 来实现图片自适应布局。以下是一个使用 CSS grid 的示例：

HTML: ```html

```

CSS: ```css .image-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 10px; }

img { width: 100%; height: auto; } ```

在这个示例中，我们首先设置了 display: grid，然后设置了 grid-template-columns，使其可以根据屏幕宽度自动调整列宽。我们还设置了 grid-gap，用于在不同列之间添加间距。

最后，我们设置了一个 img 元素，使其宽度自动为屏幕宽度，高度保持为 auto。这样，图片就会根据屏幕宽度自适应布局。

注意，auto-fill 和 minmax(200px, 1fr) 是 grid-template-columns 的两个属性，它们分别表示图片的宽度将填充容器的宽度和高度的1/2。

另外，repeat(auto-fill, minmax(200px, 1fr)) 是一个 CSS 预处理器属性，它返回一个可选的 CSS 类名，用于将 repeat 函数应用于具有相同元素数量的容器。在这个示例中，它将 repeat 与 auto-fill 和 minmax(200px, 1fr) 连用，使其在容器中生成无限数量的图片。