From 164f37b9dc6a7dcbf2e95bd25970b78131a62c32 Mon Sep 17 00:00:00 2001
From: Eli <eli@elis.space>
Date: Thu, 10 Apr 2025 15:12:59 -0400
Subject: [PATCH] fix barn images style to fit in screen

---
 p/barn.php | 18 +++++++++---------
 styles.css | 10 +++++++++-
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/p/barn.php b/p/barn.php
index cd686d3..8709d58 100644
--- a/p/barn.php
+++ b/p/barn.php
@@ -18,31 +18,31 @@
   </div>
   <div class="carousel-inner">
     <div class="carousel-item active">
-      <img src="/pics/barn/barn_front.jpg" class="d-block w-100" alt="...">
+      <img src="/pics/barn/barn_front.jpg" class="d-block img-fluid" alt="...">
     </div>
     <div class="carousel-item">
-      <img src="/pics/barn/signal-2021-04-09-011913_004.jpeg" class="d-block w-100" alt="...">
+      <img src="/pics/barn/signal-2021-04-09-011913_004.jpeg" class="d-block img-fluid" alt="...">
     </div>
     <div class="carousel-item">
-      <img src="/pics/barn/signal-2021-04-09-011913_005.jpeg" class="d-block w-100" alt="...">
+      <img src="/pics/barn/signal-2021-04-09-011913_005.jpeg" class="d-block img-fluid" alt="...">
     </div>
     <div class="carousel-item">
-      <img src="/pics/barn/signal-2021-04-09-011913_006.jpeg" class="d-block w-100" alt="...">
+      <img src="/pics/barn/signal-2021-04-09-011913_006.jpeg" class="d-block img-fluid" alt="...">
     </div>
     <div class="carousel-item">
-      <img src="/pics/barn/signal-2021-04-09-011913_007.jpeg" class="d-block w-100" alt="...">
+      <img src="/pics/barn/signal-2021-04-09-011913_007.jpeg" class="d-block img-fluid" alt="...">
     </div>
     <div class="carousel-item">
-      <img src="/pics/barn/Barn Apt 2016 006.jpg" class="d-block w-100" alt="...">
+      <img src="/pics/barn/Barn Apt 2016 006.jpg" class="d-block img-fluid" alt="...">
     </div>
     <div class="carousel-item">
-      <img src="/pics/barn/Barn Apt 2016 009.jpg" class="d-block w-100" alt="...">
+      <img src="/pics/barn/Barn Apt 2016 009.jpg" class="d-block img-fluid" alt="...">
     </div>
     <div class="carousel-item">
-      <img src="/pics/barn/Barn Apt 2016 012.jpg" class="d-block w-100" alt="...">
+      <img src="/pics/barn/Barn Apt 2016 012.jpg" class="d-block img-fluid" alt="...">
     </div>
     <div class="carousel-item">
-      <img src="/pics/barn/Barn Apt 2016 013.jpg" class="d-block w-100" alt="...">
+      <img src="/pics/barn/Barn Apt 2016 013.jpg" class="d-block img-fluid" alt="...">
     </div>
   </div>
   <button class="carousel-control-prev" type="button" data-bs-target="#carousel-barn" data-bs-slide="prev">
diff --git a/styles.css b/styles.css
index 64d8ab0..9d7dcf2 100644
--- a/styles.css
+++ b/styles.css
@@ -19,4 +19,12 @@
 .caption h4 {
     color: #fff;
     -webkit-font-smoothing: antialiased;
-}
\ No newline at end of file
+}
+
+/* Barn‑apartment carousel */
+#carousel-barn .carousel-item img{
+	max-height: 80vh;      /* never taller than 80 % of the viewport */
+	width: auto;           /* shrink / grow to preserve aspect ratio   */
+	object-fit: contain;   /* keep the whole photo in view             */
+	margin-inline: auto;   /* centre portrait‑oriented photos          */
+}