nuxtImg medium

pages/index.vue

@@ -1,7 +1,18 @@
 <template>
   <div class="homePage">
     <section class="heroBox" aria-labelledby="hero-heading">
-      
+      <NuxtImg
+        provider="strapi"
+        src="/uploads/medium_DML_Home_Hero_4f27bc7f8e.webp"              
+        class="hero-bg"
+        sizes="sm:100vw md:100vw lg:100vw"
+        alt=""                  
+        aria-hidden="true"    
+        priority 
+        loading="eager" 
+        preload
+        fetchpriority="high"
+      />
       <div class="container-10">
         <h1 id="hero-heading">{{ $t('home.heroBox.h1') }}</h1>
         <h2>{{ $t('home.heroBox.h2') }}</h2>
@@ -12,6 +23,8 @@
         <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
       </svg>  
     </section>
+
+
     <section aria-labelledby="solution-title">
       <div class="container-10 webStrategy">      
         <h2 id="solution-title">{{ $t('home.solution.title') }}</h2>
@@ -26,6 +39,8 @@
         </button>      
       </div>
     </section>
+
+
     <section class="targetGroup" aria-labelledby="invitation-title">
       <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true">
         <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
@@ -190,23 +205,26 @@ const canDoItems = [
 <style lang="sass">
 .homePage
   .heroBox
-    background-image: url('https://strapi.digimedialoop.de/uploads/DML_Home_Hero_4f27bc7f8e.webp')
-    background-repeat: no-repeat
-    background-size: cover
-    background-position: right bottom
+    position: relative
     min-height: 35rem
     height: 70vh
-    max-height: 200vw
     display: flex
     align-items: center
     justify-content: center
-    position: relative
-    @media (max-width: $breakPointMD)
-      background-position: center bottom
+    overflow: hidden           
+
+    .hero-bg
+      position: absolute
+      inset: 0                 
+      width: 100%
+      height: 100%
+      object-fit: cover
+      object-position: center bottom
+      z-index: 0               
 
     .container-10, h1, h2, h3
       position: relative
-      z-index: 1               // über dem Bild
+      z-index: 1               
 
     h1
       margin-top: 3rem