Set images to object contain

web/components/charity/charity-card.tsx

@@ -14,7 +14,7 @@ export function CharityCard(props: { charity: Charity }) {
     <Link href={`/charity/${slug}`} passHref>
       <div className="card image-full bg-base-100 glass cursor-pointer shadow-xl">
         <figure className="absolute h-full">
-          {photo && <img src={photo} alt="" />}
+          {photo && <img className="!object-contain" src={photo} alt="" />}
         </figure>
         <div className="card-body">
           <h3 className="card-title line-clamp-3">{name}</h3>

web/pages/charity/[charitySlug].tsx

@@ -53,7 +53,13 @@ function CharityPage(props: { charity: Charity }) {
           <Title className="!mt-0" text={name} />
           {/* TODO: donations over time chart */}
           <Row className="justify-between">
-            {photo && <img src={photo} alt="" className="w-40 rounded-2xl" />}
+            {photo && (
+              <img
+                src={photo}
+                alt=""
+                className="w-40 rounded-2xl object-contain"
+              />
+            )}
             <Details
               charity={charity}
               totalRaised={totalRaised}