[Vuejs]-V-img image going out of screen

Keep it simple and let the grid system do the work for you…

  <v-container class="about-section">
    <v-row>
      <v-col>
        <div>Images</div>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <v-row>
          <v-col sm="6">
            <v-card>
              <v-img
                src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
                class="white--text align-end"
                height="250"
                gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
              >
                <v-card-title>hello</v-card-title>
              </v-img>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn icon class="mr-3">
                  Visit<v-icon>mdi-heart</v-icon>
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
          <v-col sm="6">
            <v-card>
              <v-img
                src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
                class="white--text align-end"
                cover
                height="250"
                gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
              >
                <v-card-title>hello</v-card-title>
              </v-img>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn icon class="mr-3">
                  Visit
                  <v-icon>mdi-share-variant</v-icon>
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-container>

Example: https://codesandbox.io/s/runtime-breeze-hxic0v?file=/src/App.vue:11-1543