hola. Básicamente quiero hacer algo con mi carousel que recién estoy aprendiendo a usar, como no tengo mucha idea quiero hacer lo siguiente; me vendría bastante bien saber como puedo ajustar las dimensiones de mi imagen dentro de el carousel ya que estoy teniendo problemas con todo lo que intento (en sí la imagen queda muy grande de lo que en realidad es, quiero hacer que encaje sin que se sobrepase o se vea feo, se ve muy grande y pixelado). Si es posible, solo quiero cambiar lo que va dentro del carousel(dimensiones de imagen), no el tamaño del carousel.
Así es como se ve (más grande que el carousel y muy pixelado):
Este es mi código:
.carousel-item{
width: 100%;
height: 400px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media (max-width: 600px) {
.carousel-item {
height: 200px;
}
}
/*Esto estoy intentando, no funciona*/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Boostrap CSS-->
<title>Página de prueba</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark" style="background-color:black;">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Inicio <span class="sr-only">(recarga nomas)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Desplegable
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Móvil</a>
<a class="dropdown-item" href="#">Correo electrónico</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Nuestros servicios</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="En construcción..." aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Buscar</button>
</form>
</div>
</nav>
<!-- Comienza a hacer el cuerpo de la página -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" style="background-image:url(img/2.jpg);"></div>
<div class="carousel-item" style="background-image: url(img/3.jpg);"></div>
<div class="carousel-item" style="background-image:url(img/4.jpg);"></div>
<div class="carousel-item" style="background-image:url(img/sa-mp-026.png);"></div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Termina segundo renglón -->
<!--<div class="col-md-3 card card-dark" style="letter-spacing: .3px;color: black ; background:dark; border: none; border-top: 5px solid #3264a0; font-family: 'Roboto', sans-serif;box-shadow: 2px 2px 7px 0 rgba(0,0,0,.15)">-->
<!-- Optional JavaScript -->
<script src="js/bootstrap.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>