使用Vuetify在容器中居中图片并适配尺寸的问题

原代码如下：

<template>
  <v-sheet
    class="d-flex align-end justify-center pa-5"
    width="1600"
    height="400"
  >
    <v-img v-for="img in images" :key="img.id" class="ma-1" :src="img.data" />
  </v-sheet>
</template>

<script setup lang="ts">
import { ref } from "vue";

const images = ref([
  { id: 0, data: "src/assets/1.png" },
  { id: 1, data: "src/assets/2.png" },
  { id: 2, data: "src/assets/3.png" },
]);
</script>

当前问题：图片会被强制拉伸以填满容器宽度，无法保持原始尺寸比例；图片数量不足时，也会被均等分配容器空间，不符合预期显示效果。

预期效果：图片按需适配容器的高/宽范围（保持自身比例，不超出容器），当总宽度未填满容器时，整体保持居中对齐。

无需手动计算或复杂脚本，通过以下2处调整即可实现需求：

1. 给v-img添加contain属性，确保图片保持原始比例且完整显示，避免拉伸变形
2. 给v-img设置max-height: 100%并添加align-self-end类，限制图片高度不超出容器可用空间，同时继承容器底部对齐的布局

修改后的代码：

<template>
  <v-sheet
    class="d-flex align-end justify-center pa-5"
    width="1600"
    height="400"
  >
    <v-img 
      v-for="img in images" 
      :key="img.id" 
      class="ma-1 align-self-end" 
      :src="img.data"
      contain
      style="max-height: 100%;"
    />
  </v-sheet>
</template>

<script setup lang="ts">
import { ref } from "vue";

const images = ref([
  { id: 0, data: "src/assets/1.png" },
  { id: 1, data: "src/assets/2.png" },
  { id: 2, data: "src/assets/3.png" },
]);
</script>

原理说明： #

• contain：Vuetify的v-img内置属性，自动调整图片尺寸以保持原始比例，确保图片完整显示在容器内，不会被拉伸变形
• max-height: 100%：限制图片最大高度不超出容器的内容高度（自动扣除容器的padding值）
• align-self-end：让图片继承容器的底部对齐布局，同时避免Flex布局默认的拉伸行为，保留图片自身的尺寸比例

若需要支持图片数量过多时自动换行，只需给v-sheet添加flex-wrap类即可：

<v-sheet
  class="d-flex align-end justify-center flex-wrap pa-5"
  width="1600"
  height="400"
>
<!-- ... 其余代码不变 ... -->
</v-sheet>

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