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

by

0👍

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>

Leave a comment