How to make the width of a v-card depend on its height?

Question

I have a varying number of v-cards that are arranged depending of their number. What I'm trying to do is to have them with an aspect ratio of 16/9 but only the width would change.

In order to do that I figured I would need to change the width to depend on the height but I can't figure out how to do that.

Here is my code for now:

<template>
<v-app >
    <v-main>
        <v-row v-for="i in numberOfRow" :key="i" align="center" justify="space-around" :style="'height:' + 100/numberOfRow + '%;'">
            <v-col 
                v-for="n in numberOfCol(i)" 
                :key="n" 
                style="display:flex; justify-content: center;align-content: center;"
            >
                <v-card
                    elevation="10"
                    :width="90 / numberOfCol(1) + 'vw'"
                    :height="90 / numberOfRow + 'vh'"
                    style="
                            display: flex;
                            flex-direction: row;
                            justify-content: center;
                        "
                >
                    <v-img 
                        src="https://i.redd.it/c3uhsgo1vx541.jpg" 
                        width="20%"
                        height="100%"
                        style="border-radius: 0 100% 100% 0%;"
                    />
                    <div style="width: 70%; height: 100%;">
                        <div style="width: 100%; height: 50%; display: flex;text-align: center; align-items: flex-end;">
                            <v-card-text class="text-h2 primary--text">Title</v-card-text>
                        </div>
                        <div style="width: 100%; height: 20%; text-align: center;">
                            <v-card-text class="text-body-2">This is the subtitle</v-card-text>
                        </div>
                    </div>
                </v-card>
            </v-col>
        </v-row>

    </v-main>
    <v-footer color="#005686" app bottom fixed padless>
        <span class="white--text"></span>
    </v-footer>
</v-app>

<script>export default {
name: "App",
components: {
},
data() {
    return {
        numberOfSection: 2
    };
},
computed: {
    numberOfRow() {
        if(this.numberOfSection%2 === 0) {
            return 2;
        }else if(this.numberOfSection%3 === 2) {
            return Math.floor(this.numberOfSection / 3) + 1;
        }else {
            return Math.floor(this.numberOfSection / 3) + this.numberOfSection%3;
        }
    }
},
methods: {
    numberOfCol( rowNumber) {
        if( this.numberOfSection%2 === 0) {
            return this.numberOfSection/2;
        }else{
            console.log(rowNumber === this.numberOfSection/3 ? this.numberOfSection%3 : 3);
            return rowNumber ===  Math.floor(this.numberOfSection / 3) + 1 ? this.numberOfSection%3 : 3;
        }
    }
} 

And this is what it looks like now:

Does anyone have an idea on how to this with css, vue or js ?

Answer 1

尝试在样式文件font-size: clamp(MIN, VAL, MAX)也许这可以解决