Question 283111 in Html Question posted in
Some basic documentation can be found here.

Html – View carousel image in browser without need to scroll up and down

> `  .carousel-inner {
  height: 0;
  padding-bottom: 60%; /* this sets carousel aspect ratio (4:1 here)50% adjust if image 
gets cut off */
}

.carousel-item {
  position: absolute !important; /* Bootstrap is insistent */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.carousel-item img {
  height: 100%; /* Bootstrap handles width already */
  object-fit: contain; /* or 'contain',cover,fill,scale-down,none are examples if you 
want stretch instead of crop https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit 
*/
 }

* {
  box-sizing: border-box;

<div class="container"> 
  <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner ">
     <div class="carousel-item active">
      <img src="images/_1_early_history_and_stamp_1.jpg"  class="d-block w-100" 
      alt="books_photo">
     </div>
       </div> 

`

I defined the carousel image in a CSS function. Code works however the picture is showing too large on the browser thus causing the need to move the scroll bar up and down. Is there a way to make the image fit without scrolling? Would I need to make the adjustments at each image based on the height and width?

Tags:

2

Answers


  1. 0

    I don’t know if I understood your question correctly, but if in this case the image inside the carousel is showing the scroll, you can use a max height for the carousel and the object-fit:cover (you can check which is the best value for you) property in the image.
    Important: the container div need property overflow: hidden

    .box{
  height: 300px;
  width: 800px;
  background-color: red;
  overflow: hidden;
}
.carousel-inner {
  max-height: 50px;
  height:100%;
  ho
}
.carousel {
  display: flex;
}
.container {
  max-height: 150px;
  height: 90%;
}

.carousel-item {
  position: relative
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.carousel-item img {
  width: 100%;
  object-fit: cover;
 }
* {
  box-sizing: border-box;
}
    <div class="box">
<div class="container"> 
  <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner ">
     <div class="carousel-item active">
      <img src="https://placehold.co/600x400"  class="d-block w-100" alt="books_photo" />
     </div>
     </div> 
  </div>
</div>
</div>
    Login or Signup to reply.
  2. 0

    Problem

    The problem happens when the slide images overflow and trigger the vertical scrollbar to appear.

    enter image description here

    Solution

    We can fix this problem by setting the max-height of the images to 100% of the viewport. Bootstrap doesn’t have a built-in class for this, but we can create one:

    .carousel-item img {
  max-height: 100vh;
}

    We also need to correct a side effect by adding text-center to the carousel-item. This ensures that the image remains centered in the carousel when the width becomes less than the carousel. The alternative (not shown) is to display full width, but crop the image.

     <div class="carousel-item text-center">
  <img src="https://photojournal.jpl.nasa.gov/jpeg/PIA23685.jpg" class="img-fluid">
</div>

    And the final result can be seen in the snippet. Click "Run" and then "Full page" to adjust the page size and check responsive behavior.

    Snippet

    .carousel-item img {
  max-height: 100vh;
}
    <div class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
     <div class="carousel-item text-center">
      <img src="https://photojournal.jpl.nasa.gov/jpeg/PIA23685.jpg" class="img-fluid">
    </div> 
    <div class="carousel-item text-center active">
      <img src="https://photojournal.jpl.nasa.gov/jpeg/PIA24372.jpg" class="img-fluid">
    </div>
    <div class="carousel-item text-center">
      <img src="https://photojournal.jpl.nasa.gov/jpeg/PIA23865.jpg" class="img-fluid">
    </div>
  </div>
</div>


<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search