diff --git a/src/components/Common/ArticleCard/index.module.css b/src/components/Common/ArticleCard/index.module.css
index 2a22c99d..4f571161 100644
--- a/src/components/Common/ArticleCard/index.module.css
+++ b/src/components/Common/ArticleCard/index.module.css
@@ -11,10 +11,20 @@
 }
 
 .image {
-  height: auto;
-  max-width: 300px;
+  display: block;
+  width: 100%;
+  height: 100%;
   min-width: 0;
+  object-fit: cover;
+}
+
+.imageFrame {
+  display: block;
+  width: 300px;
+  aspect-ratio: 40 / 21;
   flex-shrink: 0;
+  overflow: hidden;
+  background-color: rgba(156, 163, 175, 0.18);
 }
 
 .description {
@@ -41,9 +51,8 @@
 }
 
 @media (max-width: 1023px) and (min-width: 641px) {
-  .image {
-    height: auto;
-    max-width: 300px;
+  .imageFrame {
+    width: 300px;
   }
 
   .content {
@@ -52,9 +61,8 @@
 }
 
 @media (max-width: 1081px) and (min-width: 1023px) {
-  .image {
-    height: auto;
-    max-width: 250px;
+  .imageFrame {
+    width: 250px;
   }
 
   .content {
@@ -63,9 +71,8 @@
 }
 
 @media (max-width: 717px) and (min-width: 641px) {
-  .image {
-    height: auto;
-    max-width: 200px;
+  .imageFrame {
+    width: 200px;
   }
 
   .content {
@@ -78,10 +85,8 @@
     display: block;
   }
 
-  .image {
+  .imageFrame {
     width: 100%;
-    max-width: 100%;
-    height: auto;
     margin-bottom: 1rem;
   }
 
diff --git a/src/components/Common/Elements/WebpImage/index.module.css b/src/components/Common/Elements/WebpImage/index.module.css
index f62732cd..c636a12f 100644
--- a/src/components/Common/Elements/WebpImage/index.module.css
+++ b/src/components/Common/Elements/WebpImage/index.module.css
@@ -6,8 +6,11 @@
 }
 
 .cardPicture {
-  max-width: 300px;
+  width: 300px;
+  aspect-ratio: 300 / 158;
   flex-shrink: 0;
+  overflow: hidden;
+  background-color: rgba(156, 163, 175, 0.18);
 }
 
 .recentPicture {
@@ -17,9 +20,10 @@
 .image {
   display: block;
   width: 100%;
-  height: auto;
+  height: 100%;
   max-width: 300px;
   min-width: 0;
+  object-fit: cover;
 }
 
 .recent {
@@ -39,33 +43,30 @@
 
 @media (max-width: 1023px) and (min-width: 641px) {
   .cardPicture {
-    max-width: 300px;
+    width: 300px;
   }
 
   .image {
-    height: auto;
     max-width: 300px;
   }
 }
 
 @media (max-width: 1081px) and (min-width: 1023px) {
   .cardPicture {
-    max-width: 250px;
+    width: 250px;
   }
 
   .image {
-    height: auto;
     max-width: 250px;
   }
 }
 
 @media (max-width: 717px) and (min-width: 641px) {
   .cardPicture {
-    max-width: 200px;
+    width: 200px;
   }
 
   .image {
-    height: auto;
     max-width: 200px;
   }
 }
@@ -73,14 +74,12 @@
 @media (max-width: 640px) {
   .cardPicture {
     width: 100%;
-    max-width: 100%;
+    margin-bottom: 1rem;
   }
 
   .image {
     width: 100%;
     max-width: 100%;
-    height: auto;
-    margin-bottom: 1rem;
   }
 
   .thumbnail {
diff --git a/src/components/Common/UnifiedArticleCard/__tests__/UnifiedArticleCard.test.tsx b/src/components/Common/UnifiedArticleCard/__tests__/UnifiedArticleCard.test.tsx
index 24e6c371..2e9f2f6d 100644
--- a/src/components/Common/UnifiedArticleCard/__tests__/UnifiedArticleCard.test.tsx
+++ b/src/components/Common/UnifiedArticleCard/__tests__/UnifiedArticleCard.test.tsx
@@ -40,6 +40,7 @@ describe('UnifiedArticleCard', () => {
     expect(image).toHaveAttribute('src', 'https://example.com/zenn.png');
     expect(image).toHaveAttribute('width', '1200');
     expect(image).toHaveAttribute('height', '630');
+    expect(image?.parentElement?.tagName).toBe('SPAN');
   });
 
   it('renders the updated date only when it is a later day than publishedAt', () => {
diff --git a/src/components/Common/UnifiedArticleCard/index.tsx b/src/components/Common/UnifiedArticleCard/index.tsx
index 2fc055b4..816d36e9 100644
--- a/src/components/Common/UnifiedArticleCard/index.tsx
+++ b/src/components/Common/UnifiedArticleCard/index.tsx
@@ -42,17 +42,18 @@ export default function UnifiedArticleCard({ article, priority = false }: Props)
           <WebpImage article={article} card={true} priority={priority} />
         )}
         {article.source !== 'blog' && article.thumbnailUrl && (
-          <img
-            className={styles.image}
-            src={article.thumbnailUrl}
-            alt=""
-            width={1200}
-            height={630}
-            loading="lazy"
-            decoding="async"
-            fetchPriority={priority ? 'high' : undefined}
-            style={{ alignSelf: 'flex-start' }}
-          />
+          <span className={styles.imageFrame}>
+            <img
+              className={styles.image}
+              src={article.thumbnailUrl}
+              alt=""
+              width={1200}
+              height={630}
+              loading={priority ? 'eager' : 'lazy'}
+              decoding="async"
+              fetchPriority={priority ? 'high' : undefined}
+            />
+          </span>
         )}
         <div className={styles.content}>
           {article.isSponsored && <SponsoredDisclosure compact />}