CODEWITHSUNDEEP
vue.jsvuetify.js
ETHan
ETHan

Reputation: 207

How to display images as the same size in a V-Card

This should be a simple fix but I can’t figure it out. Please excuse my lack of posting my whole code.

Here is the issue. I am using the following 

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

I have an array of users with profile images. Some of these images are different sizes ( some may be 400w other maybe 250w ). My issue is that because these images are different sizes, that they actually end up making my cards ( which are uniform in size ), different widths and height. This makes the cards ugly of course, and I need help on how to fix this.

Now, I had a friend build a react project, and I providing him with pictures, but the sizes were off. I fixed this by importing all images into Figma and making them all the same height and width, which, worked. However, for this project, this method isn’t working for me and I need a way to auto size these images so that my cards stay uniform.

I do not want to use the v-avatar feature, so please refrain from asking me, because these aren’t really “avatars”.

One “solution” I found was to use “contain” but I can’t find any information on contain in the documentation and I’m not sure if that would even work.

Upvotes: 1

Views: 4423

Answers (2)

ETHan
ETHan

Reputation: 207

I never found a 1 size fits all fix for this, but this is what I did to make it work out.

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.

Upvotes: 0

El Danielo
El Danielo

Reputation: 780

Unfortunately in some edge cases you cannot depend only on the components provided by a framework and you need to improvise. This issue sounds purely like a CSS one. Instead of using vuetify component you could try to create own component and just apply the avatar image as element's background-image inline property. Then you could use background-size: cover in order to preserve correct ratio of uploaded images.

Upvotes: 1

Related Questions