向子孙传播CSS网格大小以可视化v卡图像

Question

我正在尝试在CSS网格中排列带有图像的vuetify卡，但由于v卡的孙代，因此v卡的v-img看不到网格大小。如何将网格尺寸向下传播到v-img？

我希望图像填充卡片，类似于弹性盒版本的外观（https://vuetifyjs.com/en/components/cards/#grids）

这是我想要的外观，根据窗口大小自动调整图像的大小。

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: () => ({})
});

.grid {
  display: grid;
  height: calc(100vh - 64px - 60px);
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

.grandchild {}

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/vuetify.min.css" />

<div id="app">
  <v-app id="inspire">
    <v-app-bar app fixed dark>
      <v-toolbar-title>Toolbar</v-toolbar-title>
    </v-app-bar>
    <v-content>
      <v-container>
        <div class="grid">
          <v-card v-for="n in 4" :key="n">
            <v-img height="100%" width="100%" class="grandchild" src="https://cdn.vuetifyjs.com/images/cards/docks.jpg">
            </v-img>

            <v-card-subtitle>Number {{ n }}</v-card-subtitle>
          </v-card>

        </div>
      </v-container>
    </v-content>
    <v-footer app dark>
      <span>Footer</span>
    </v-footer>
  </v-app>
</div>

Answer 1

问题是您在布局上使用的是1fr。尝试改用minmax(0, 1fr)：

.grid {
  display: grid;
  height: calc(100vh - 64px - 60px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}