From cad2f1d410332a47e2408c1df1717cc317dadbb3 Mon Sep 17 00:00:00 2001
From: hiyach28 <hiyach28@gmail.com>
Date: Mon, 3 Aug 2026 18:35:24 +0000
Subject: [PATCH] [UI] Add fitContainer rendering mode to normalize thumbnails

Signed-off-by: hiyach28 <hiyach28@gmail.com>
---
 src/components/Card/Card.style.js             | 12 +++-
 src/components/Card/index.js                  | 12 +++-
 src/components/image.js                       | 58 +++++++++++++------
 .../Resources/Resources-grid/index.js         |  1 +
 4 files changed, 62 insertions(+), 21 deletions(-)

diff --git a/src/components/Card/Card.style.js b/src/components/Card/Card.style.js
index 0c7820c012a20b..4fd26b2df6e299 100644
--- a/src/components/Card/Card.style.js
+++ b/src/components/Card/Card.style.js
@@ -71,6 +71,16 @@ export const CardWrapper = styled.div`
       justify-content: center;
       padding: 0.5rem;
     `}
+    ${(props) =>
+      props.$fitContainer &&
+      !props.$listView &&
+      `
+      padding: 2rem;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `}
 
     .gatsby-image-wrapper,
     .old-gatsby-image-wrapper {
@@ -123,7 +133,7 @@ export const CardWrapper = styled.div`
     `
     @media screen and (max-width: 1200px) and (min-width: 992px) {
       .post-thumb-block {
-        height: auto;
+        height: ${(props) => (props.$fitContainer ? "10rem" : "auto")};
         min-height: 10rem;
       }
       .post-content-block {
diff --git a/src/components/Card/index.js b/src/components/Card/index.js
index 22d44c26b39a7b..e7d3d4db64555d 100644
--- a/src/components/Card/index.js
+++ b/src/components/Card/index.js
@@ -12,10 +12,15 @@ const Card = ({
   loading = "lazy",
   fetchpriority = "auto",
   listView = false,
+  fitContainer = false,
 }) => {
   const { isDark } = useStyledDarkMode();
   return (
-    <CardWrapper fixed={!!frontmatter.abstract} $listView={listView}>
+    <CardWrapper
+      fixed={!!frontmatter.abstract}
+      $listView={listView}
+      $fitContainer={fitContainer}
+    >
       <div className="post-block">
         <div className="post-thumb-block">
           <Image
@@ -25,7 +30,8 @@ const Card = ({
               frontmatter.thumbnail.publicURL
               ? frontmatter.darkthumbnail
               : frontmatter.thumbnail)}
-            imgStyle={{ objectFit: "cover" }}
+            fitContainer={fitContainer}
+            imgStyle={!fitContainer ? { objectFit: "cover" } : {}}
             loading={loading}
             fetchpriority={fetchpriority}
             alt={frontmatter.title}
@@ -98,4 +104,4 @@ const Card = ({
   );
 };
 
-export default Card;
\ No newline at end of file
+export default Card;
diff --git a/src/components/image.js b/src/components/image.js
index 8dddbb8627a8b9..38a323887b63a8 100644
--- a/src/components/image.js
+++ b/src/components/image.js
@@ -1,35 +1,59 @@
 import React from "react";
 import { GatsbyImage } from "gatsby-plugin-image";
 
-const Image = ({ childImageSharp, extension, publicURL, alt, imgStyle, ...rest }) => {
+const Image = ({
+  childImageSharp,
+  extension,
+  publicURL,
+  alt,
+  imgStyle,
+  fitContainer,
+  ...rest
+}) => {
+  /**
+   * Rendering Mode: fitContainer
+   * By default, GatsbyImage and SVGs scale to their intrinsic aspect ratios.
+   * Passing `fitContainer={true}` forces the image wrapper to 100% width and height,
+   * and uses `object-fit: contain` to scale the image losslessly inside that bounds.
+   *
+   * Note: This rendering mode guarantees full visibility with no cropping,
+   * but mathematically CANNOT guarantee identical pixel area (visual weight) across
+   * arbitrary aspect ratios, as that limitation belongs to standard CSS constraints.
+   */
+  const computedWrapperStyle = fitContainer
+    ? { width: "100%", height: "100%" }
+    : { width: "100%", height: "auto" };
+
+  const computedImgStyle = {
+    objectFit: fitContainer ? "contain" : imgStyle?.objectFit || "cover",
+    ...(fitContainer && { width: "100%", height: "100%" }),
+    ...imgStyle,
+  };
 
   if (!childImageSharp && extension === "svg") {
     return (
-      <div className="old-gatsby-image-wrapper" style={{ width: "100%", height: "auto" }}>
+      <div className="old-gatsby-image-wrapper" style={computedWrapperStyle}>
         <img
           src={publicURL}
           alt={alt || "Blog image"}
           width="100%"
-          height="auto"
-          style={{
-            objectFit: imgStyle?.objectFit || "cover",
-            ...imgStyle
-          }}
+          height={fitContainer ? "100%" : "auto"}
+          style={computedImgStyle}
         />
       </div>
     );
   }
 
-  return <GatsbyImage
-    key={publicURL}
-    image={childImageSharp?.gatsbyImageData}
-    alt={alt || "Blog image"}
-    imgStyle={{
-      objectFit: imgStyle?.objectFit || "cover",
-      ...imgStyle
-    }}
-    {...rest}
-  />;
+  return (
+    <GatsbyImage
+      key={publicURL}
+      image={childImageSharp?.gatsbyImageData}
+      alt={alt || "Blog image"}
+      style={fitContainer ? computedWrapperStyle : undefined}
+      imgStyle={computedImgStyle}
+      {...rest}
+    />
+  );
 };
 
 export default Image;
diff --git a/src/sections/Resources/Resources-grid/index.js b/src/sections/Resources/Resources-grid/index.js
index b015866da4eb57..8958290507c5cd 100644
--- a/src/sections/Resources/Resources-grid/index.js
+++ b/src/sections/Resources/Resources-grid/index.js
@@ -51,6 +51,7 @@ const ResourceGrid = (props) => {
               <Card
                 frontmatter={frontmatter}
                 fields={fields}
+                fitContainer={frontmatter.type === "Article"}
               />
             </Col>
           ))}