From c0d1d517aeff034f83c30782d5b831b33eaac2e9 Mon Sep 17 00:00:00 2001
From: keshavananddev <53607429-keshavananddev@users.noreply.replit.com>
Date: Tue, 17 Mar 2026 22:01:32 +0000
Subject: [PATCH] Adjust image sizing to maintain aspect ratio and fit content

Modify CSS for the cricket image to ensure it displays with its natural aspect ratio, constraining its height to align with adjacent text while allowing its width to adjust proportionally.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1cf11e65-6deb-45c8-b84b-15ffb586a42f
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 1693786b-1a78-40ff-bda7-bbae9e47519e
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/ef74882e-373e-40b4-93c7-cf128544a855/1cf11e65-6deb-45c8-b84b-15ffb586a42f/ZDkY1x7
Replit-Helium-Checkpoint-Created: true
---
 css/bundle.css  | 22 ++++++++++++++++++----
 css/enhance.css | 22 ++++++++++++++++++----
 2 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/css/bundle.css b/css/bundle.css
index 221d606..21b5258 100644
--- a/css/bundle.css
+++ b/css/bundle.css
@@ -10828,14 +10828,28 @@ body {
 }
 
 /* ============================================================
-   CRICKET IMAGE (first about section) — Natural aspect ratio
-   Let the image display at its own proportions; no forced crop.
+   CRICKET IMAGE (first about section) — Natural aspect ratio,
+   width shrinks to fit; height constrained to match text column.
    ============================================================ */
+.page-about-us .about-img-1 {
+    width: auto !important;
+    max-width: 100% !important;
+}
+
+.page-about-us .about-img-1 figure {
+    display: flex !important;
+    justify-content: center !important;
+}
+
 .page-about-us .about-img-1 img {
-    aspect-ratio: unset !important;
-    max-height: none !important;
+    width: auto !important;
+    max-width: 100% !important;
     height: auto !important;
+    max-height: 480px !important;
+    aspect-ratio: unset !important;
     object-position: center center !important;
+    display: block !important;
+    margin: 0 auto !important;
 }
 
 /* ============================================================
diff --git a/css/enhance.css b/css/enhance.css
index a7f126c..e427b5e 100644
--- a/css/enhance.css
+++ b/css/enhance.css
@@ -797,14 +797,28 @@ body {
 }
 
 /* ============================================================
-   CRICKET IMAGE (first about section) — Natural aspect ratio
-   Let the image display at its own proportions; no forced crop.
+   CRICKET IMAGE (first about section) — Natural aspect ratio,
+   width shrinks to fit; height constrained to match text column.
    ============================================================ */
+.page-about-us .about-img-1 {
+    width: auto !important;
+    max-width: 100% !important;
+}
+
+.page-about-us .about-img-1 figure {
+    display: flex !important;
+    justify-content: center !important;
+}
+
 .page-about-us .about-img-1 img {
-    aspect-ratio: unset !important;
-    max-height: none !important;
+    width: auto !important;
+    max-width: 100% !important;
     height: auto !important;
+    max-height: 480px !important;
+    aspect-ratio: unset !important;
     object-position: center center !important;
+    display: block !important;
+    margin: 0 auto !important;
 }
 
 /* ============================================================