Prevent image from overflowing on mobile

Author: s2t2

docs/_quarto.yml

@@ -259,7 +259,7 @@ format:
     theme: cosmo
       #light: default #flatly
       #dark: darkly
-    #css: styles/my-style.css
+    css: styles/my-style.css
     code-copy: true
     #code-fold: false #show
     ##code-line-numbers: true

docs/index.qmd

@@ -1,9 +1,13 @@
-![](/images/python-banner-2025.png){fig-align="center" fig-alt="Intro to Software Development in Python (banner image)" height=400}
+
 
 # Welcome {.unnumbered}
 
-Welcome to the \"Intro to Python Programming and Applications\" book (<span id="auto-copyright-year">2025</span> edition, online)!
+<img src="/images/python-banner-2025.png"
+    class="banner-image"
+    alt="Intro to Software Development in Python (banner image)."
+    >
 
+Welcome to the \"Intro to Python Programming and Applications\" book (<span id="auto-copyright-year">2025</span> edition, online)!
 
 Whether you are a professional seeking to enhance technical skills, or a student aspiring to enter the field, this book should serve as a valuable resource.
 

docs/styles/my-style.css

@@ -0,0 +1,7 @@
+.banner-image {
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  display: block;
+  object-fit: cover;
+}