调整图像大小而不裁剪vuejs

Question

我正在尝试将图像调整为一定大小。我希望它使用vuejs始终是屏幕宽度的100％和高度的300px。我希望图像可以独立于图像的大小进行拉伸或收缩，但是根本无法做到。这是代码的完整代码，紧跟我要放在空格中的特定部分

<template light>
   <v-app>
      <div
         v-if="dialog_historico_pedidos"
      >
         <historico-pedidos-component @closehistorico="dialog_historico_pedidos = false">
         </historico-pedidos-component>
      </div>
      <v-app-bar
         id="appBar"
         fixed
         app
         dark
         style="z-index: 10"
         :color="empresa && empresa.bar_color && empresa.bar_color.hex || ''"
         :collapse="!show_end_footer"
         :src="empresa && empresa.toolbar_image || ''"
      >
         <template v-slot:img="{ props }">
            <v-img
               v-bind="props"
               gradient="to top, rgba(0, 0, 0,.7), rgba(0, 0, 0,.2)"
            >
            </v-img>
         </template>
         <v-btn
            v-if="!is_on_root"
            icon
            router
            exact
            to="/"
         >
            <v-icon>mdi-arrow-left</v-icon>
         </v-btn>
         <v-toolbar-title v-text="title" />
         <v-spacer />

         <v-tooltip v-model="show_cart_message" color="green" bottom>
          <template v-slot:activator="{ on }">
            <v-btn
               icon
               v-on="on"
               @click="abreCarrinho()"

            >
               <v-badge
                  color="green"
                  overlap
                  :content="quantidade"
                  :value="quantidade"
               >
                  <v-icon>local_grocery_store</v-icon>
               </v-badge>
            </v-btn>

          </template>
          <span>{{cartMessage()}}</span>
        </v-tooltip>

         <v-menu
            bottom
            offset-y
         >
         <template v-slot:activator="{ on }">
            <v-btn
               icon
               v-on="on"
            >
               <v-icon>person</v-icon>
            </v-btn>
         </template>
         <v-list>
            <v-list-item
               v-if="!isLogado"
               @click="realizaLoginConta()"
            >
            <v-list-item-title>Entrar</v-list-item-title>
            </v-list-item>
            <v-list-item
               v-if="isLogado"
               @click="realizaDetalhamentoConta()"
            >
            <v-list-item-title>Minha Conta</v-list-item-title>
            </v-list-item>
            <v-list-item
               v-if="isLogado"
               @click="realizaLogoutConta()"
            >
            <v-list-item-title>Sair</v-list-item-title>
            </v-list-item>
         </v-list>

         </v-menu>
         <v-tooltip v-model="show_pedido_message" color="green" bottom v-if="isLogado">
            <template v-slot:activator="{ on }">
               <v-btn
                  icon
                  v-on="on"
                  @click="dialog_historico_pedidos = true"
               >
                  <v-icon>receipt</v-icon>
               </v-btn>

            </template>
            <span>Histórico de pedidos</span>
          </v-tooltip>
      </v-app-bar>
      <v-card class="tamanho-img pt-8 mt-12 mb-0">
         <v-img
            v-if="true"
            src="https://geekpublicitario.com.br/wp-content/uploads/2020/01/whopper-voltou-2-por-15-burger-king.jpg"
            style="z-index: 1"
            alt=""
            contain
         ></v-img>
      </v-card>
      <v-alert
         prominent
         text
         style="z-index: 2"
         :class="(false && 'pt-8 mt-12 mb-0') + ' justify-center text-center'"
         color="red"
         v-if="empresa && !empresa.aberta"
      >

         <h4>LOJA FECHADA</h4>
      </v-alert>

      <span :style="{background: `url(${empresa && empresa.background_image})`}" class="bg"></span>
      <v-content>
         <status-funcionamento-component v-if="empresa" :empresa=empresa></status-funcionamento-component>
         <v-container>
            <nuxt v-if="empresa || not_found" />
         </v-container>
      </v-content>


      <v-overlay
         :value="exibe_carrinho"
      >
         <v-row align="center" justify="center" style="width:100vw">
            <v-col class="col col-sm-9 col-lg-5 col-xs-12" >
               <v-toolbar
                  dark
                  flat
               >
                  <v-toolbar-title>
                     Seus produtos
                  </v-toolbar-title>
                  <v-spacer></v-spacer>
                  <v-btn
                     icon
                     @click="exibe_carrinho = false"
                  >
                     <v-icon>mdi-close</v-icon>
                  </v-btn>
               </v-toolbar>
               <cart-component class="ma-0 pa-0" @carrinhoFechado="exibe_carrinho = false"></cart-component>
            </v-col>
         </v-row>
      </v-overlay>

      <v-card>
         <v-footer class="pb-12 mb-6">
            <v-row>
               <v-col
                  v-if="empresa"
                  class="text-center"
                  cols="12"
                  sm="6"
                  md="3"
               >
                  <p class="caption" id="horario">Horário de Funcionamento</p>
                  <v-simple-table dense>
                     <template v-slot:default>
                        <thead>
                        <tr>
                           <th class="text-center">Dia</th>
                           <th class="text-center">Horário</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in empresa && empresa.funcionamento" :key="item.name">
                           <td>{{ item.dia }}</td>
                           <td v-if="!isLojaFuncionando(item)">Não abre</td>
                           <td v-else>
                              {{ getStringHorariosFuncionamento(item) }}
                           </td>
                        </tr>
                        </tbody>
                     </template>
                  </v-simple-table>
               </v-col>
               <v-col
                  v-if="empresa"
                  id="endereco"
                  class="text-center"
                  cols="12"
                  sm="6"
                  md="6"
               >
                  <p class="caption">{{empresa && empresa.nome}}</p>
                  <p class="caption" v-if="empresa && empresa.contatos"><span class="font-weight-thin">Telefone:</span> <span v-for="(contato,i) in empresa.contatos" :key="i">{{contato.valor}} </span></p>
                  <p class="overline ma-0">{{empresa && empresa.razao_social}}</p>
                  <p class="caption ma-0"><span class="font-weight-thin">CNPJ: </span>{{empresa && empresa.cpf_cnpj}}</p>
                  <p class="overline ma-0"><span class="font-weight-thin">ENDERECO: </span>{{empresa && empresa.enderecos && empresa.enderecos.length && enderecoPrintable(empresa.enderecos[0])}}</p>
               </v-col>
               <v-col
                  v-if="empresa"
                  cols="12"
                  sm="6"
                  md="3"
                  class="text-center font-weight-medium"
               >
                  <p class="caption">Locais de entrega</p>
                  <locais-entrega-component id="entrega"></locais-entrega-component> <br>
               </v-col>
               </v-row>
               <v-col
                  class="text-center font-weight-medium"
                  cols="12"
               >
                  {{ new Date().getFullYear() }} — <strong>Desenvolvido por DataHex</strong>
               </v-col>
         </v-footer>
      </v-card>

      <v-footer
         v-if="quantidade && show_end_footer"
         color="rgba(0, 0, 0, 0.8)"
         elevation="20"
         height="80px"
         app
         :z-index="99"
      >
         <v-layout
            justify-center
            row
         >
            <v-btn
               grow
               outlined
               color="green"
               @click="fecharPedido()"
               :disabled=false
               x-large
            >
               Finalizar compra
            </v-btn>
         </v-layout>
      </v-footer>
   </v-app>
</template>

<style scoped>
.bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    z-index: 0;
  }

.tamanho-img {
   width: 100vw;
   height: 300px;
}
</style>

现在我要在其中插入图像的代码部分

<v-card class="tamanho-img pt-8 mt-12 mb-0">
   <v-img
      v-if="true"
      src="https://geekpublicitario.com.br/wp-content/uploads/2020/01/whopper-voltou-2-por-15-burger-king.jpg"
      style="z-index: 1"
      alt=""
      contain
   ></v-img>
</v-card>

<style scoped>
.tamanho-img {
   width: 100vw;
   height: 300px;
}
</style>

问题在于图像总是会裁切或在高度和宽度上均等地缩小，因此图像不适合宽度，仅适合高度。 请帮忙。