fix: 画像のスタイル崩れを修正

Author: yamageji

apps/web/app/components/ticket/NamecardSection.vue

@@ -27,9 +27,7 @@ const { locale: currentLocale } = useLocaleCurrent()
       <NuxtImg
         :src="'/namecard/namecard-samples.png'"
         alt="test"
-        width="auto"
-        height="auto"
-        fit="cover"
+        width="596"
         loading="lazy"
       />
       <div class="buttons-wrapper">

apps/web/app/components/ticket/PersonalSponsorSection.vue

@@ -16,7 +16,7 @@ import { ticketUrl } from '~/utils/constants'
         :detail="$t(`personal_sponsor.merit${i}.detail`)"
         :caution="i === 2 || i === 4 ? $t(`personal_sponsor.merit${i}.caution`) : ''"
       >
-        <NuxtImg alt="" :src="`/sponsor/merit-${i}.jpg`" loading="lazy" />
+        <NuxtImg alt="" :src="`/sponsor/merit-${i}.jpg`" loading="lazy" class="image" />
       </VFMeritCard>
     </div>
     <div class="personal-sponsor-text">
@@ -89,6 +89,12 @@ import { ticketUrl } from '~/utils/constants'
   color: var(--color-white);
 }
 
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .apply {
   display: flex;
   flex-direction: column;

packages/ui/components/sponsor/MeritCard.vue

@@ -11,9 +11,7 @@ const props = defineProps<MeritProps>()
 <template>
   <div class="merit">
     <div class="merit-card">
-      <div class="image">
-        <slot />
-      </div>
+      <slot />
     </div>
     <div class="merit-item">
       <h4 class="merit-title">{{ title }}</h4>
@@ -31,18 +29,9 @@ const props = defineProps<MeritProps>()
 }
 
 .merit-card {
-  position: relative;
-  display: grid;
-  place-items: center;
-  padding-bottom: calc(var(--unit) * 1);
   width: 224px;
   height: 126px;
-  background: var(--color-white);
-}
-
-.image {
-  width: 100%;
-  height: auto;
+  object-fit: cover;
 }
 
 .merit-item {
@@ -79,17 +68,9 @@ const props = defineProps<MeritProps>()
   }
 
   .merit-card {
-    width: 343px;
-    height: 228px;
-    padding-bottom: 0;
-  }
-
-  .image {
-    margin: 0 auto;
     width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
+    height: auto;
+    max-width: 232px;
   }
 
   .merit-item ::v-deep(h4) {