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>
@@ -9,26 +20,30 @@
       </div>
       <!-- Nach dem Container: Spiegelwelle unten -->
       <svg class="sectionWave wave-bottom" style="" 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"/>
+        <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>
-            <h3>{{ $t('home.solution.teaser') }}</h3>
-            <p>{{ $t('home.solution.text') }}</p>
-            <button
-              class="mintBtn"
-              role="button"
-              aria-describedby="solution-title"
-              aria-label="headless CMS Info" @click="navigateToArticle">
-                {{ $t('home.solution.buttonText') }}
-            </button>      
+        <h2 id="solution-title">{{ $t('home.solution.title') }}</h2>
+        <h3>{{ $t('home.solution.teaser') }}</h3>
+        <p>{{ $t('home.solution.text') }}</p>
+        <button
+          class="mintBtn"
+          role="button"
+          aria-describedby="solution-title"
+          aria-label="headless CMS Info" @click="navigateToArticle">
+            {{ $t('home.solution.buttonText') }}
+        </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"/>
+        <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>  
       <div class="container-10">
         <div class="row">
@@ -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