diff --git a/src/components/card/BlogCard.jsx b/src/components/card/BlogCard.jsx
index 50061bc54..4456ff576 100644
--- a/src/components/card/BlogCard.jsx
+++ b/src/components/card/BlogCard.jsx
@@ -7,10 +7,9 @@ const BlogCard = ({ title, desc, tags, cover, locale, path, className }) => {
 
   return (
     <Link to={to} className={`${styles.BlogCardWrapper} ${className}`}>
-      <div
-        className={styles.coverWrapper}
-        style={{ backgroundImage: `url(${cover})` }}
-      ></div>
+      <div className={styles.coverWrapper}>
+        <img src={cover} alt={title} />
+      </div>
       <div className={styles.descWrapper}>
         <div className={styles.bottomWrapper}>
           <Tags list={tags} tagsClass={styles.tags} />
diff --git a/src/components/card/BlogCard.module.less b/src/components/card/BlogCard.module.less
index 7de730cde..1762232a4 100644
--- a/src/components/card/BlogCard.module.less
+++ b/src/components/card/BlogCard.module.less
@@ -1,4 +1,4 @@
-@import (reference) "../../css/responsive.less";
+@import (reference) '../../css/responsive.less';
 
 .BlogCardWrapper {
   display: block;
@@ -13,20 +13,13 @@
   }
 
   .coverWrapper {
-    height: 290px;
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
+    width: 100%;
+    aspect-ratio: 350/ 219;
     border-radius: 6px;
+    overflow: hidden;
 
-    @media @tablet {
+    img {
       width: 100%;
-      height: 305px;
-    }
-
-    @media @phone {
-      width: 100%;
-      height: 250px;
     }
   }
 
diff --git a/src/templates/blogTemplate.module.less b/src/templates/blogTemplate.module.less
index a75afc7cb..e8ab1d1a6 100644
--- a/src/templates/blogTemplate.module.less
+++ b/src/templates/blogTemplate.module.less
@@ -9,7 +9,7 @@
   width: 100%;
   height: 440px;
   background-repeat: no-repeat;
-  background-size: contain;
+  background-size: cover;
   background-position: center;
   &::after {
     content: '';