3

I have the following carousel:

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      ...
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="Images/pastry3.jpg" alt="First slide">
      </div>
    </div>
      ...
  </div>

and I have the following CSS:

.carousel {
    width: 100%;
    height: 100%;
}

    .carousel .carousel-inner, .carousel .carousel-item {
        width: 100%;
        height: 100%;
    }

    .carousel-item img {
        object-fit: cover;
        object-position: 50% 50%;
    }

I have images that are much larger than the screen (width: 100% and height: 100%) and I'd like them to be imgs that can maintain their aspect ratios while being in the center of the screen, hence object-fit: cover; and object-position: 50% 50%, but it isn't working. Why?

I'm trying to make a full-screen practice home page with sliding images/videos with different text areas in different slides.

Richard
  • 7,037
  • 2
  • 23
  • 76

3 Answers3

4

I also had the same problem until I did this:

.carousel-item img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: 50% 50%;
}

I hope this helps someone :)

InsculptInc
  • 111
  • 1
  • 5
  • THANK YOU. This fixed my issue. Note that if you are using a smaller slider you can change the height to a fixed height and it works as well. – user1959500 Mar 02 '22 at 21:15
1

You need in the image:

height:100%;
max-width:100%
Dedalos01
  • 35
  • 8
1
.carousel-item img {
  object-fit: cover;
  object-position: center;
  height: 100%;
  overflow: hidden;
}
Jeevan Sadalge
  • 21
  • 4
  • 3
    While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Adrian Mole Oct 09 '21 at 16:49
  • 1
    I will take care of this from now on wards. Thanks – Jeevan Sadalge Oct 12 '21 at 15:26