Estoy trabajando un diseño web, el cual le adapte un slider al inicio, en pantallas de equipos de computo se ven bien, pero en dispositivos móviles o responsive el slider se hace pequeño,quise adaptarlo que se vea completo pero se distorsiona y se mira feo,lo que no he logra es que se vea una parte que por lo regular que enfoque lo del medio de las imágenes.
.carousel-item {
height: 100vh;
min-height: 300px;
}
.w-100 {
height: 100vh;
}
<!doctype html>
<html lang="es" dir="rtl">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.rtl.min.css" integrity="sha384-WJUUqfoMmnfkBLne5uxXj+na/c7sesSJ32gI7GfCk4zO4GthUKhSEGyvQ839BC51" crossorigin="anonymous">
<link rel="stylesheet" href="css/stilos.css" />
<title>Slider</title>
</head>
<body>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2018/06/10/17/39/market-3466906_960_720.jpg" class="d-block w-100" alt="1">
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2016/03/02/20/13/grocery-1232944_960_720.jpg" class="d-block w-100" alt="2">
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2016/11/23/14/56/bazaar-1853361_960_720.jpg" class="d-block w-100" alt="3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>