如何在 V-Card 中显示相同大小的图像答案

【问题标题】：How to display images as the same size in a V-Card如何在 V-Card 中显示相同大小的图像
【发布时间】：2019-08-31 17:40:58
【问题描述】：

这应该是一个简单的修复，但我无法弄清楚。请原谅我没有发布我的整个代码。

这就是问题所在。我正在使用以下

`
<v-card>
<v-img :src=“{{person.png}}”</v-img>
<v-card>
`

我有一组带有个人资料图片的用户。其中一些图像的尺寸不同（有些可能是 400w，有些可能是 250w）。我的问题是，因为这些图像的尺寸不同，它们实际上最终使我的卡片（尺寸一致）、不同的宽度和高度。这当然会使卡片变得丑陋，我需要有关如何解决此问题的帮助。

现在，我有一个朋友建立了一个 React 项目，我给他提供了图片，但是尺寸不对。我通过将所有图像导入 Figma 并使它们具有相同的高度和宽度来解决此问题，这很有效。但是，对于这个项目，这种方法对我不起作用，我需要一种方法来自动调整这些图像的大小，以便我的卡片保持统一。

我不想使用 v-avatar 功能，所以请不要问我，因为这些不是真正的“头像”。

我发现的一个“解决方案”是使用“contain”，但我在文档中找不到任何关于 contains 的信息，我不确定这是否可行。

【问题讨论】：

您是否尝试像<v-img :src="person.png" width="400" height="400"></v-img>那样指定宽度和高度？
我确实做到了，它所做的实际上是强制调整大小，但图像会被裁剪，即使这样，它似乎也不能完美地工作。感谢您的回复

标签： vue.js vuetify.js

【解决方案1】：

不幸的是，在某些极端情况下，您不能仅依赖于框架提供的组件，您需要即兴发挥。这个问题听起来纯粹是一个 CSS 问题。您可以尝试创建自己的组件，而不是使用 vuetify 组件，并将头像图像作为元素的 background-image 内联属性应用。然后你可以使用 background-size:cover 来保持上传图片的正确比例。

【讨论】：

看起来很奇怪 Vuetify 不允许像在其组件内部确认图像这样简单的事情。他们的文档似乎还有其他更复杂的功能。

【解决方案2】：

我从来没有找到一个适合所有尺寸的解决方案，但这就是我为解决这个问题所做的。

1. I imported all images to figma
2. I edited the images to all be the same size, then used the crop tool to "fit" them to the new "canvas" size
3. Within my v-img , I added "contain", which insured that the picture didn't get cut off or cropped when placing inside of a card.

Thanks for the help all.

【讨论】：