feat(site): external blog image must cover (#592)

kestra-io · Oct 18, 2023 · abff79e · abff79e
1 parent 444c259
commit abff79e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/components/blogs/BlogCard.vue b/components/blogs/BlogCard.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="mb-5 mt-1" role="button">
         <NuxtLink class="text-dark" :href="blog._path">
-            <NuxtImg loading="lazy" format="webp" quality="80" densities="x1 x2" :alt="blog.image" :src="blog.image" class="card-image w-100 rounded-3" />
+            <NuxtImg loading="lazy" format="webp" quality="80" densities="x1 x2" :alt="blog.image" :src="blog.image" class="card-image w-100 rounded-3" fit="cover"/>
             <div class="mt-3">
                 <span class="small-text category">{{ blog.category }}</span>
                 <h6 class="mt-2">{{ blog.title }}</h6>
@@ -40,6 +40,7 @@
     }
 
     .card-image {
-        max-height: 220px;
+        object-fit: cover;
+        aspect-ratio: 16/9;
     }
 </style>
diff --git a/components/blogs/BlogsList.vue b/components/blogs/BlogsList.vue
@@ -44,7 +44,7 @@
     </div>
 </template>
 
-<script>
+<script >
     export default {
         name: "BlogsList",
         props: {