Q: Bootstrap Carousel and  tag with object-fit & object-position not working 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.

A: 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 :)

A: You need in the image:
height:100%;
max-width:100%


A: .carousel-item img {
  object-fit: cover;
  object-position: center;
  height: 100%;
  overflow: hidden;
}

