fix: higlighted and full article card images aspect ratio

aleph-im · Dec 11, 2024 · 59f8ea2 · 59f8ea2
1 parent 3513df8
commit 59f8ea2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/components/Blog/BlogArticleCard/FeatureImage/cmp.tsx b/src/components/Blog/BlogArticleCard/FeatureImage/cmp.tsx
@@ -10,8 +10,14 @@ export const FeatureImage = ({
 }) => {
   return (
     <LoadingBlinkBox loading={loading} loadingHeight="100%" loadingWidth="100%">
-      <div tw="relative w-full h-full flex justify-center">
-        <Image src={src} alt="Feature Image" fill />
+      <div tw="relative w-auto h-full flex items-center justify-center">
+        <Image
+          src={src}
+          alt="Feature Image"
+          height={0}
+          width={0}
+          tw="relative! w-auto h-auto max-w-full max-h-full"
+        />
       </div>
     </LoadingBlinkBox>
   );

diff --git a/src/components/Blog/BlogArticleCard/cmp.tsx b/src/components/Blog/BlogArticleCard/cmp.tsx
@@ -39,7 +39,7 @@ export const BlogArticleCard = ({
                   <Headline size={size} loading={loading}>
                     {headline}
                   </Headline>
-                  <div tw="lg:hidden w-full h-96 mb-12">
+                  <div tw="lg:hidden w-full mb-8 mt-4">
                     <FeatureImage src={featureImage} loading={loading} />
                   </div>
                   <Description size={size} loading={loading}>
@@ -76,7 +76,7 @@ export const BlogArticleCard = ({
                   {headline}
                 </Headline>
               </div>
-              <div tw="lg:hidden w-full h-96 mb-12">
+              <div tw="lg:hidden w-full mb-8 mt-4">
                 <FeatureImage src={featureImage} loading={loading} />
               </div>
               <div tw="flex flex-col justify-between gap-6">