ImageBanner.vue

<script setup>
import { ref } from 'vue'

defineProps(['url'])

const isOpen = ref(false)

function show() {
  isOpen.value = !isOpen.value
}
</script>

<template>
  <div class="image-banner shadow" :class="{ open: isOpen }" @click.prevent="show">
    <img :src="url" />
  </div>
</template>

<style scoped>
.image-banner {
  height: 5em;
  display: flex;
  border-radius: var(--radius);
  border: var(--border) solid hsl(var(--clr-primary));
  cursor: pointer;
}

.image-banner>img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.open {
  height: unset;
}
</style>