1
0
mirror of https://github.com/elisspace/pops.git synced 2026-08-29 15:44:05 +00:00

fix barn images style to fit in screen

This commit is contained in:
Eli
2025-04-10 15:12:59 -04:00
parent a3ac3c65d6
commit 164f37b9dc
2 changed files with 18 additions and 10 deletions

View File

@@ -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">

View File

@@ -19,4 +19,12 @@
.caption h4 {
color: #fff;
-webkit-font-smoothing: antialiased;
}
}
/* Barnapartment 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 portraitoriented photos */
}