From 0ab2742b24d77e3e5e056f5af174f5a75c96605d Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sat, 1 Nov 2025 23:26:16 +0000
Subject: [PATCH] Fix: Make banner images responsive with object-fit

Co-authored-by: tysa <tysa@sas.upenn.edu>
---
 styles.css | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/styles.css b/styles.css
index 34d9cb9..a73af72 100644
--- a/styles.css
+++ b/styles.css
@@ -66,3 +66,19 @@ body {
   background: #f1f1f1;
   border-radius: 8px;
 }
+
+/* Banner Image Object-Fit Function */
+/* This CSS property makes the banner images fit the screen size dynamically */
+#bannerImage1,
+#bannerImage2 {
+  /* object-fit: cover makes the image fill its container while maintaining aspect ratio */
+  /* The image will be scaled to cover the entire area, cropping if necessary */
+  object-fit: cover;
+  
+  /* Ensure the image fills the full width and height of its container */
+  width: 100%;
+  height: 100%;
+  
+  /* Position the focal point of the image (20% from top, centered horizontally) */
+  object-position: center 20%;
+}