Fix: the image is adaptable for any size

wizelineacademy · Nov 21, 2024 · 26c033d · 26c033d
1 parent 06d042c
commit 26c033d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/eLearning_upgraded/views/website_slides_course_main_template.xml b/eLearning_upgraded/views/website_slides_course_main_template.xml
@@ -14,8 +14,10 @@
                             <div class="row">
                                 <div class="col-12 col-md-4 col-lg-3 position-relative">
                                     <div class="d-none d-md-flex align-items-end justify-content-around h-100">
-                                        <div t-field="channel.image_1920" t-options="{'widget': 'image', 'class': 'o_wslides_course_pict d-inline-block mb-2 mt-3 my-md-0 custom-image', 'preview_image': 'image_1024'}" class="h-100"/>
-                                        <div class="overlay-icon">
+                                    <div class="image-wrapped">
+                                        <div t-field="channel.image_1920" t-options="{'widget': 'image', 'class': 'o_wslides_course_pict d-inline-block mb-2 mt-3 my-md-0 custom-image', 'preview_image': 'image_1024'}" class="h-100 image-content"/>
+                                    </div>      
+                                        <div class="overlay-icon">  
                                             <button role="button" class="btn btn-link" title="Share Channel" aria-label="Share Channel" data-bs-toggle="modal" t-att-data-bs-target="'#slideShareModal_%s' % channel.id">
                                                 <img src="/theme_academy/static/src/img/ios_share.png" alt="Icon" class="icon"/>
                                             </button>

diff --git a/theme_academy/static/src/scss/website_slides_courses.scss b/theme_academy/static/src/scss/website_slides_courses.scss
@@ -358,4 +358,21 @@ $blue-200: var(--Blue-200, #101E2D);
         }
     }
 
+}
+
+.image-wrapped {
+    width: 900px;
+    height: 170px;
+    position: relative;
+    overflow: hidden;
+    border-radius: 10px 10px 0 0;
+
+    .image-content{
+        width: 100%;
+        height: 100%;
+        object-fit: cover; //Oculta el exceso de la imagen 
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
 }