banner novo

src/app/public/home/banner/banner.component.html

@@ -1,23 +1,16 @@
 <mdb-carousel [indicators]="true" [animation]="'fade'">
   <mdb-carousel-item>
     <img
-      src="https://assets-portal-cms.olx.com.br/1576x300_38126a593d.webp"
+    src="../../../../assets/images/Banner1animadogif.gif"
       class="d-block w-100"
-      alt="..."
+      alt="Banner1"
     />
   </mdb-carousel-item>
   <mdb-carousel-item>
     <img
-      src="https://assets-portal-cms.olx.com.br/1576x300_267d64821e.webp"
+      src="../../../../assets/images/Banner2.jpg"      
       class="d-block w-100"
-      alt="..."
+      alt="Banner2"
-    />
-  </mdb-carousel-item>
-  <mdb-carousel-item>
-    <img
-      src="https://assets-portal-cms.olx.com.br/1576x300_cc8d61d4ca.webp"
-      class="d-block w-100"
-      alt="..."
     />
   </mdb-carousel-item>
 </mdb-carousel>

src/app/public/home/banner/banner.component.scss

@@ -15,6 +15,13 @@
   }
 }
 
+mdb-carousel {
+  width: 100%; /* Largura total do carrossel */
+  height: 400px; /* Altura do carrossel */
+}
+
 mdb-carousel-item {
-  height: 320px;
+  width: 100%; /* A imagem ocupa toda a largura do carrossel */
+  height: 80%; /* A imagem ocupa toda a altura do carrossel */
+  object-fit: cover; /* A imagem será cortada para cobrir o espaço sem distorcer */
 }