cv2/components/Banner/Logo.vue

<template>
  <nuxt-link
    :href="href"
    target="_blank"
    class="link"
  >
    <v-img
      :src="img"
      :height="height"
      :min-height="height"
      :max-height="height"
      :alt="alt"
    />
  </nuxt-link>
</template>

<script setup lang="ts">
import type { PropType } from '@vue/runtime-core'

defineProps({
  href: String,
  img: String,
  alt: {
    type: String as PropType<string | undefined>,
    required: false,
    default: ''
  },
  height: {
    type: Number as PropType<string | number | undefined>,
    required: false,
    default: 26
  }
})
</script>

<style scoped lang="scss">
.link {
  width: 20%;
  margin: 0 auto;
  max-width: 140px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  :deep(.v-img) {
    width: 100%;
  }

  @media (max-width: 540px) {
    width: 100%;
    margin: 12px auto;
  }
}

:deep(.v-img__img) {
  display: block !important;
}
</style>