How to fit router-link exacly to image? Vue js 3

Question

I have implemented a flex grid gallery and I want to make images router-links to other sites. You can see that the entire gallery-item is a link, how can I make it only an image?

vue component .vue

<template>
    <div class="gallery">
        <div class="gallery-item">
            <router-link to="/cat"><img src="../assets/cat.jpg" alt="cat"></router-link>
        </div>
    </div>
</template> 

css styling

<style scoped>
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
  margin: 20px;
}

.gallery-item {
  background-color: aquamarine;
  max-height: 300px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
</style>

Answer 1

Give router-link a class and make it as display: block, or you can merge:

<template>
    <div class="gallery">
        <router-link to="/cat" class="gallery-item">
            <img src="../assets/cat.jpg" alt="cat">
        </router-link>
    </div>
</template> 

<style scoped>
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      grid-gap: 20px;
      margin: 20px;
    }
    .gallery-item {
        background-color: aquamarine;
        max-height: 300px;
        display: block;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
</style>