modified: assets/css/w3.css

	modified:   assets/js/componentes/card.js
	modified:   assets/js/paginas/home.js

Author: faustinopsy

assets/css/w3.css

@@ -824,3 +824,19 @@ input:checked + .slider:before {
 #star-border:hover {
   cursor: pointer
 }
+.aspect-ratio-box {
+  padding-top: 56.25%; 
+  position: relative;
+}
+
+.aspect-ratio-box img.card-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.cards-placeholder {
+  min-height: 400px; 
+}

assets/js/componentes/card.js

@@ -13,7 +13,9 @@ class Card {
         this.cardElement.classList.add('w3-card-4',"w3-panel","w3-leftbar", "w3-sand", "w3-third", "w3-center");
         this.cardElement.innerHTML = `
             <h2><b>${titulo}</b></h2>
-            <img src="${imagem}" alt="${titulo}" style="width:300px; height:300px">
+            <div class="aspect-ratio-box">
+              <img src="${imagem}" alt="${titulo}" loading="lazy" class="card-img">
+            </div>
             <div class="container">
                 <p>${descricao}</p>
                 <button class="toggle-content-btn w3-btn w3-border w3-block" aria-label="${this.i18nService.t('details')}">${this.i18nService.t('details')}</button> 

assets/js/paginas/home.js

@@ -16,7 +16,7 @@ class Home {
         return `
         <h1>${this.i18nService.t('home')}</h1>
         ${this.slides.render()}
-        <div id="cardsContainer"></div>
+        <div id="cardsContainer" class="cards-placeholder"></div>
         `;
     }
     afterRender(){