sec03 modify

js/index.js

@@ -7,7 +7,7 @@ $(".sec-01__slider").slick({
     let result;
       $.ajax({
           method: "GET",
-          url: "../json/data.json",
+          url: "https://m3.hhh.com.tw:18686/genjson",
           dataType: "json",
       }).done(function (msg) {
           result = [...msg];
@@ -69,7 +69,7 @@ $(".sec-01__slider").slick({
               let sub = temp[i]["data"];
               for(let j = 0; j < sub.length; j++){
                 str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
-                  <div class="tabpar__card__imgfr"><img class="tabpar__card__img" src="${sub[j]['imgUrl']}" alt=""></div>
+                  <div class="tabpar__card__imgfr" style="background-image: url('${sub[j]['imgUrl']}');"></div>
                   <p class="mt-2 pe-2">${sub[j]['description']}</p>
                 </div>`
               }
@@ -80,7 +80,7 @@ $(".sec-01__slider").slick({
               let sub = temp[i]["data"];
               for(let j = 0; j < sub.length; j++){
                 str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
-                  <div class="tabpar__card__imgfr"><img class="tabpar__card__img" src="${sub[j]['imgUrl']}" alt=""><img class="tabpar__card__play" src="images/Play-Button.webp"></div>
+                  <div class="tabpar__card__imgfr" style="background-image: url('${sub[j]['imgUrl']}');"><img class="tabpar__card__play" src="images/Play-Button.webp"></div>
                   <p class="mt-2 pe-2">${sub[j]['description']}</p>
                 </div>`
               }
@@ -91,7 +91,7 @@ $(".sec-01__slider").slick({
               let sub = temp[i]["data"];
               for(let j = 0; j < sub.length; j++){
                 str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
-                  <div class="tabpar__card__imgfr"><img class="tabpar__card__img" src="${sub[j]['imgUrl']}" alt=""></div>
+                  <div class="tabpar__card__imgfr" style="background-image: url('${sub[j]['imgUrl']}');"></div>
                   <p class="mt-2 pe-2">${sub[j]['description']}</p>
                 </div>`
               }

sass/main.css

@@ -275,13 +275,9 @@ body {
   height: 29vh;
   overflow: hidden;
   position: relative;
-}
-
-.sec-03 .tabpar__card__img {
-  width: 100%;
-  height: 140%;
-  -webkit-transform: translateY(-15%);
-          transform: translateY(-15%);
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
 }
 
 .sec-03 .tabpar__card__play {

sass/main.scss

@@ -220,11 +220,9 @@ body {
                 height: 29vh;
                 overflow: hidden;
                 position: relative;
-            }
-            &__img {
-                width: 100%;
-                height: 140%;
-                transform: translateY(-15%);
+                background-position: center center;
+                background-size: cover;
+                background-repeat: no-repeat;
             }
             &__play {
                 position: absolute;