carousel image is blurred while responsive

Issue

Carousel images are being blurred when it's tried responsive.. allignment is correct but image is getting blurred when screen resolution is decreased. USING BOOTSTRAP

WEBSITE : (FIRST CAROUSEL )https://www.asus.com/in/

(WHEN I TRIED USING IMAGE FLUID IT'S IMAGE BECOMES SMALLER )

CODE :

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="img/corasel-img1.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="img/corasel-img2.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="img/corasel-img3.jpg" class="d-block w-100" alt="...">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>

CSS :

.carousel-item{
    height: 100vh;
    min-height: 300px;
}
.w-100{
    height: 100vh;
}

MY IMAGE IS BLURRED WHEN IT'S BEEN RESPONSIVE

Solution

Try to add object fit rule to your image element(s).

Code for you:

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

Answered By - CodErdal