Why does a vuetify image have "padding-bottom: 200%"? And how do I make it smaller?

Vuetify's <v-img> bewilders me. I've got the following:

App.vue

<template>
  <v-app>
    <v-container>
      <v-row no-gutters class="flex-grow-0 justify-end">
        <router-link class="ma-8" to="/">Home</router-link>
        <router-link class="ma-8" to="/">Features</router-link>
        <router-link class="ma-8" to="/">About</router-link>
      </v-row>
    </v-container>

    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: "App",

  data: () => ({
    //
  }),
};
</script>

Home.vue

<template>
  <v-container class="center">
    <v-row>
      <v-col cols="12" sm="8" class="d-flex flex-column justify-center">
        <h1 class="text-h3 text-md-h1">Insert catchy phrase here.</h1>
      </v-col>
      <v-col
        cols="12"
        sm="4"
        class="d-flex flex-column justify-center align-center"
      >
        <v-img max-height="100%" contain src="../assets/iphone.png"></v-img>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "Home",

  components: {},
};
</script>

<style scoped>
.center {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>

My code produces this:

The desktop layout looks great, but when the screen size is smaller, the image wraps and becomes too big.

The desired behavior is for this image to shrink when it wraps so that it still fits inside the viewport. But instead the image is big and extends beyond the viewport.

Upon closer inspection I found that <v-img> is to blame for this strange behavior. Inside of the v-responsive__sizer is this line of styling: padding-bottom: 200%;. When I uncheck this, my image shrinks to fit inside the container and things look like I want them to.

Anyone here familiar enough with vuetify to help me understand how I can achieve my desired behavior?