I have a changing number of v-cards that are displayed based on their quantity. My goal is to maintain an aspect ratio of 16/9, but only adjust the width.
To achieve this, I believe I need to make the width dependent on the height, although I am unsure how to accomplish this.
Here is what my code currently looks like:
<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;
}
}
}
This is the current appearance:
https://i.stack.imgur.com/YMsv5.jpg
If anyone has suggestions on achieving this using CSS, Vue, or JS, please share!