https://i.sstatic.net/hmKhW.jpg
When attempting to make the carousel images responsive, they appear blurred as the screen resolution decreases. The alignment is correct, but the image quality is not maintained. Bootstrap is being used for this.
For reference, here is a website with a similar carousel:
(AFTER TRYING TO USE THE 'IMAGE FLUID' SOLUTION, THE 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;
}
WHEN I MAKE MY IMAGE RESPONSIVE, IT APPEARS BLURRED