Fix: Adjust image sizing in carousel to fill container

Fer-Bar · Apr 14, 2024 · 2b49d4e · 2b49d4e
1 parent 0775674
commit 2b49d4e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/pet/static/pet/css/main_carousel.css b/pet/static/pet/css/main_carousel.css
@@ -8,10 +8,7 @@
 }
 
 .carousel-item {
-  height: auto;
-  max-height: 90vh;
-
-
+  height: 33rem;
 }
 .carousel-item::before {
   content: "";
@@ -26,7 +23,9 @@
 }
 .carousel-item img {
   filter: blur(2px);
+  object-fit: cover;
   width: 100%;
+  height: 100%;
 }
 @media (min-width: 40em) {
   .carousel-caption p {

diff --git a/pet/templates/pet/main_carousel.html b/pet/templates/pet/main_carousel.html
@@ -3,7 +3,7 @@
     {% for headline in headlines %}
       <div class="carousel-item {% if forloop.first %}active{% endif %}">
         <img src="{{ headline.image_url }}"
-             class="img-fluid d-block"
+             class="d-block"
              alt="{{ headline.title }}">
         <div class="container">
           <div class="carousel-caption text-end">