Vuetify/Vue 2 如何强制v-card始终保持方形并动态缩放？

以下几种方法可以替代你当前用v-img撑高度的实现，让v-card始终保持方形或自定义宽高比，同时处理内部内容的滚动或截断：

方案1：直接利用v-card的aspect-ratio + 内容容器滚动 #

v-card本身支持aspect-ratio属性，无需依赖v-img就能强制固定宽高比。给内部的v-card-text设置height: 100%占满卡片高度，再通过overflow-auto实现内容超出时滚动：

<v-card width="100%"
        aspect-ratio="1"
        :color="text ? 'primary' : ''">
    <v-card-text class="text-h6 font-weight-black white--text h-full overflow-auto">
        {{ text }}
    </v-card-text>
</v-card>

如果需要单行文本截断，替换overflow-auto为overflow-hidden text-truncate whitespace-nowrap；多行截断可参考方案3。

方案2：灵活自定义宽高比（支持动态切换） #

如果需要在不同场景下切换宽高比，用CSS变量动态控制会更方便：

<template>
  <v-card 
    width="100%" 
    :style="`aspect-ratio: ${cardRatio};`" 
    :color="text ? 'primary' : ''"
  >
    <v-card-text class="h-full overflow-auto text-h6 font-weight-black white--text">
      {{ text }}
    </v-card-text>
  </v-card>
</template>

<script setup>
const cardRatio = ref('1/1') // 方形，可改为'4/3'、'16/9'等任意比例
</script>

方案3：多行文本截断（无需滚动） #

如果希望内容超出时直接截断显示省略号，可通过CSS的line-clamp实现（兼容现代浏览器）：

<v-card width="100%"
        aspect-ratio="1"
        :color="text ? 'primary' : ''">
    <v-card-text class="text-h6 font-weight-black white--text h-full">
        <div class="line-clamp-3">
            {{ text }}
        </div>
    </v-card-text>
</v-card>

对应的自定义CSS（如果项目未使用Tailwind等框架）：

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示3行后截断，可自行修改行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 100%;
}

为什么可以去掉v-img？ #

你之前用v-img是为了确保卡片高度足够，但v-card的aspect-ratio属性已经能直接控制宽高比，不需要额外的容器来撑高。去掉v-img后结构更简洁，还能避免v-img默认的背景、padding等样式带来的干扰。

内容的提问来源于stack exchange，提问作者Undead