图像网格化
图像网格化
提问于 2019-10-03 13:55:02
我有一个图像URls数组(长度在0到25之间)，我想要以响应方式显示在1-2列宽的网格中(2列如果在宽屏幕上，1列如果在移动设备上，等等)。我有一个vue.js应用程序，并且正在使用Vuetify材料设计系统。
我如何设置它，以便它在宽屏幕上每2幅图像自动创建一个新行？我添加了“行包装”属性，但认为它不起作用。到目前为止，这是我的代码：
<v-container fluid grid-list-md>
<v-layout row wrap>
<v-flex md6>
<v-card v-for="gif in results">
<v-img :src="gif.images.fixed_height_small.url" height="200px"></v-img>
</v-card>
</v-flex>
</v-layout>
</v-container>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-10-03 14:29:44
检查这些文档。Vuetify有12点网格系统。
https://v15.vuetifyjs.com/es-MX/framework/grid
- v-1.5
包含5种媒体断点，用于针对特定屏幕大小或方向。
https://v15.vuetifyjs.com/es-MX/framework/breakpoints
- v-1.5
您必须重新定位for循环，使用断点xs和md。
<!-- v-1.5 -->
<v-container fluid grid-list-md>
<!-- xs = 600px full screen (12) -->
<!-- md = 600px or more. half of the screen (6) -->
<v-layout row wrap>
<v-flex xs12 md6 v-for="gif in results">
<v-card >
<v-img :src="gif.images.fixed_height_small.url" height="200px"></v-img>
</v-card>
</v-flex>
</v-layout>
</v-container>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58220696
复制相关文章
相似问题
腾讯云开发者
