How to create equal height v-cols in Vuetify and vertically center image?

Question

I can't seem to get two columns the same height with the image centered in Vuetify. I've tried everything and don't know what I'm doing wrong. I hope this image explains what I wan't to achieve.

Below is a snippet, but it doesn't look like what I'm seeing locally. I don't think it really matters as the cols aren't the same height neither.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
data: () => ({
      showPassword:false,
      valid: false,
      wachtwoord:'',
      wachtwoordRules: [
        v => !!v || 'Wachtwoord is vereist',
      ],
      email: '',
      emailRules: [
        v => !!v || 'E-mail is vereist',
        v => /.+@.+\..+/.test(v) || 'Voer een geldig e-mailadres in',
      ]
    }),
    methods: {
      validate () {
        this.$refs.form.validate()
      },
    },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.2/vuetify.min.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>


<div id="app">
  <v-app style="
    background-color: #011c40;
    background-image: linear-gradient(180deg,  #011c40 50%,  rgb(26, 65, 115) 100%);
    background-size: cover;
  ">
    <v-main>
       <v-container fill-height>
    <v-row justify="center"
           align="center"
           no-gutters
            class="grey">
      <v-col cols="4" class="grey lighten-5">
       <v-img src="http://www.dpereira.nl/Er/img/banner.png"></v-img>
      </v-col>
      <v-col align="center" cols="4"  class="grey lighten-5 pa-10">
        <v-img class="mb-7" src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" width="200px"></v-img>
          <v-form  ref="form"
                   v-model="valid"
          >
            <v-text-field
                    v-model="email"
                    :rules="emailRules"
                    label="E-mail"
                    required/>
            <v-text-field
                    :type="showPassword ? 'text' : 'password'"
                    label="Wachtwoord"
                    :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                    @click:append="showPassword = !showPassword"
                    v-model="wachtwoord"
                    :rules="wachtwoordRules"
                    required
            />
            <v-checkbox class="mt-0" dense label="Onthoud mij"></v-checkbox>
          </v-form>
        <v-btn height="50px" :disabled="!valid" tile ripple depressed block color="secondary" @click="validate">Inloggen</v-btn>
        <div class="pt-3">
          <v-divider></v-divider>
          <div class="d-block caption text-center mt-3"><a href="">Wachtwoord vergeten?</a></div>
          <div class="d-block caption text-center">Nog geen account? Meld u <a href="">hier</a> aan.</div>
        </div>
      </v-col>
    </v-row>
  </v-container>
    </v-main>
  </v-app>
</div>

Answer 1

At first you need to remove align="center" from the row. Then add contain attribute to v-img tag and set the column to disply:flex. Example:

    <v-col cols="4" class="grey d-flex lighten-5">
       <v-img contain src="http://www.dpereira.nl/Er/img/banner.png"></v-img>
     </v-col>