Merge branch 'fix/resize-images' of https://github.com/vuejs-jp/vuefes-2024 into fix/resize-images

Author: yamageji

apps/web/app/components/event/EventAsset.vue

@@ -18,9 +18,6 @@ const props = defineProps<EventAssetProps>()
     alt=""
     class="eventcard-image"
     :style="{ marginTop: `${marginTop}px` }"
-    width="920"
-    height="444"
-    fit="cover"
     loading="lazy"
   />
 </template>

apps/web/app/components/event/EventCard.vue

@@ -17,6 +17,7 @@ const props = defineProps<EventCardProps>()
     :title="$t(`event.${title.replaceAll('-', '_')}`)"
     :font-class
     :padding-class
+    class="frame"
   >
     <template #content>
       <div class="eventcard-content">
@@ -34,6 +35,13 @@ const props = defineProps<EventCardProps>()
 <style scoped>
 @import url('~/assets/media.css');
 
+.frame {
+  display: flex;
+  flex-direction: column;
+  align-items: space-between;
+  justify-content: space-between;
+}
+
 .eventcard-content {
   font-size: 16px;
   font-weight: 500;

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) {