fix: images size

Author: mderoullers

components/archive/card.vue

@@ -72,9 +72,15 @@ const buttonLabel = computed(() =>
     class="group border dark:border-zinc-500 m-2 rounded-2xl overflow-hidden shadow-sm text-zinc-700 dark:text-zinc-300"
   >
     <NuxtLink :to="path" class="grid grid-cols-1 sm:grid-cols-10 gap-1">
-      <div class="sm:col-span-3">
+      <div :class="`sm:col-span-3 relative overflow-hidden rounded-t-2xl sm:rounded-l-2xl sm:rounded-t-none ${imageSize}`">
+        <!-- Background Layer (Ambience) -->
         <img
-          :class="`w-full object-cover object-center rounded-t-2xl sm:rounded-l-2xl sm:rounded-t-none shadow-lg group-hover:scale-[1.02] transition-all duration-500 ${imageSize}`"
+          :src="image" aria-hidden="true" role="presentation"
+          class="absolute inset-0 w-full h-full object-cover blur-xl scale-125 opacity-100 transition-transform duration-500 group-hover:scale-130"
+        >
+        <!-- Foreground Layer -->
+        <img
+          class="w-full h-full object-contain object-center relative z-10 group-hover:scale-110 transition-transform duration-500 [mask-image:radial-gradient(ellipse_at_center,black_60%,transparent_100%)] webkit-mask-image-[radial-gradient(ellipse_at_center,black_60%,transparent_100%)]"
           width="300" :src="image" :alt="alt"
         >
       </div>

components/blog/Header.vue

@@ -40,7 +40,7 @@ function formatDate(dateString: string) {
     </h1>
     <img
       :src="image || ''" :alt="alt || `Image illustrant l'article : ${title}`" width="600"
-      class="m-auto rounded-2xl shadow-lg h-32 md:h-72 w-4/6 md:w-4/5 content-center object-cover"
+      class="m-auto rounded-2xl shadow-lg w-4/6 md:w-4/5 content-center h-auto"
     >
     <!-- <p class="text-xs sm:text-sm my-3 max-w-xl mx-auto text-center text-zinc-600 dark:text-zinc-400">
       {{ description }}

components/blog/card.vue

@@ -68,11 +68,16 @@ const buttonLabel = computed(() =>
     class="group border dark:border-zinc-500 m-2 overflow-hidden rounded-2xl shadow-sm text-zinc-700 dark:text-zinc-300"
   >
     <NuxtLink :to="path">
-      <div class="relative">
+      <div class="relative overflow-hidden lg:h-48 md:h-36 rounded-t-2xl">
+        <!-- Background Layer (Ambience) -->
+        <img
+          :src="image" aria-hidden="true" role="presentation"
+          class="absolute inset-0 w-full h-full object-cover blur-xl scale-125 opacity-100 transition-transform duration-500 group-hover:scale-130"
+        >
+        <!-- Foreground Layer -->
         <img
           :src="image" :alt="alt" :width="300" :height="200" loading="lazy" decoding="async"
-          class="lg:h-48 md:h-36 w-full object-cover object-center rounded-t-2xl shadow-lg group-hover:scale-[1.02] transition-all duration-500"
-          style="aspect-ratio: 300 / 200;"
+          class="w-full h-full object-contain object-center relative z-10 group-hover:scale-110 transition-transform duration-500 [mask-image:radial-gradient(ellipse_at_center,black_60%,transparent_100%)] webkit-mask-image-[radial-gradient(ellipse_at_center,black_60%,transparent_100%)]"
         >
       </div>
       <div class="px-3 pb-4 relative">