Vue3/Vuetify中内容自适应父容器并防止溢出的实现指南

.responsive-container {
  box-sizing: border-box; /* 确保宽度/高度包含内边距和边框 */
  max-height: 100%;     /* 限制最大高度不超过父容器 */
  max-width: 100%;      /* 限制最大宽度不超过父容器 */
  /* 其他样式 */
}

/* styles.css 或 ResultScreen.vue 的 <style> 块 */
.result-screen-wrapper {
  box-sizing: border-box;
  max-height: 100%;
  max-width: 100%;
  /* 确保父容器也有明确的高度，例如通过flex或grid */
  display: flex; /* 或 grid，根据布局需求选择 */
  flex-direction: column; /* 如果是列布局 */
  /* 允许内容滚动，如果内容确实超出了max-height */
  overflow-y: auto; 
}

.responsive-image {
  max-width: 100%; /* 确保图片不会超出其父容器 */
  height: auto;    /* 保持图片纵横比 */
  display: block;  /* 移除图片底部的额外空间 */
}

<template>
  <!-- 最外层的v-container，用于承载整个ResultScreen内容 -->
  <v-container class="result-container elevation-12 result-screen-wrapper">
    <v-container class="ma-0 pa-0 flex-grow-1"> <!-- 确保内部容器也能弹性增长 -->
      <v-row>
        <!-- 应用responsive-image类到v-img -->
        <v-img class="img responsive-image" :src="store.imgUrl" @click="downloadImg"></v-img>
      </v-row>
      <!-- 按钮容器和其他内容 -->
      <v-container v-if="store.progress === 100 && !isUpscaled" class="btn-container mt-3">
        <v-row class="justify-center" v-for="(row, index) in btnRows" :key="index">
          <v-col cols="auto" v-for="btn in row" :key="btn">
            <v-btn variant="tonal" @click="onClick(btn)">{{ btn }}</v-btn>
          </v-col>
        </v-row>
      </v-container>
      <v-row v-if="store.imgUrl && store.progress !== 100" class="justify-center mt-5">
        <v-progress-circular
          :rotate="360"
          :size="75"
          :width="15"
          :model-value="store.progress"
          color="teal"
          class=""
          align="center"
        >
          {{ store.progress }}
        </v-progress-circular>
      </v-row>
    </v-container>
  </v-container>
</template>

<script setup>
// ... 你的脚本逻辑
</script>

<style scoped>
.result-screen-wrapper {
  box-sizing: border-box;
  max-height: 100%;
  max-width: 100%;
  display: flex; /* 使用Flexbox确保子元素能按需填充或收缩 */
  flex-direction: column;
  /* 如果内容可能超出max-height，可以添加滚动条 */
  overflow-y: auto;
  /* 确保父容器（例如screen-row的v-col）有明确的高度 */
  /* 如果v-container本身需要占据可用空间，可以结合flex-grow-1等Vuetify类 */
}

.responsive-image {
  max-width: 100%;
  height: auto; /* 保持图片比例 */
  display: block; /* 消除img标签默认的底部空白 */
}

/* 如果v-container内部的v-img还是溢出，可能需要检查v-img的父元素是否也受限 */
/* 或者直接针对v-img内部的img标签应用样式，如果Vuetify的v-img包装器没有完全生效 */
/* 例如：.result-screen-wrapper .v-img__img { max-width: 100%; height: auto; } */
</style>