0

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): introducir la descripción de la imagen aquí

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>

2 respuestas 2

1

Puedes controlar la posicion (centrada) de la imagen, repeticion (sin repeticion) y color de fondo (en caso de que la imagen no cubra el espacio) con las siguientes propiedades:

  background-position: center center;
  background-repeat: no-repeat;
  background-color: #000;

Para controlar el tamaño de la imagen, la propiedad background-size permite varias opciones, las mas importantes:

  • background-size: cover para cubrir el espacio del contenedor. Si el contenedor es muy ancho, pero la imagen no, se va a estirar mucho y podria verse pixeleado
  • background-size: contain para contener la imagen completa dentro del contenedor. Si el contenedor es muy ancho pero la imagen no, la imagen se reducira mucho y habra mucho espacio vacío.
  • background-size: valor, donde valor puede ser en pixeles u otra unidad fija, o en porcentaje del espacio disponible (ej: 800px, 80%). Aqui tu controlas que porcion de la imagen quedara visible.

En cualquier caso para un background en ancho completo necesitaras imagenes de buena resolucion para que se vea bien en pantallas grandes. En el ejemplo se muestran las varias opciones:

.carousel-item{
  width: 100%;
  height: 400px;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #000;
}
.image-cover{
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.image-contain{
 -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}
.image-custom1{
  background-size: 80%;
}
@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">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <!-- 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 image-cover active" style="background-image:url(https://www.tourinews.es/uploads/s1/16/86/25/paisaje-2.jpeg);">cover</div>
          <div class="carousel-item image-contain" style="background-image: url(https://www.tourinews.es/uploads/s1/16/86/25/paisaje-2.jpeg);">contain</div>
          <div class="carousel-item image-custom1" style="background-image:url(https://www.tourinews.es/uploads/s1/16/86/25/paisaje-2.jpeg);">porcentaje</div>
          <div class="carousel-item" style="background-image:url(https://www.tourinews.es/uploads/s1/16/86/25/paisaje-2.jpeg);">default</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>

2
  • muy buena bro es mucho mejor que mi código enhorabuena :) Commented el 5 sept. 2020 a las 8:16
  • por cierto te di la fecha hacia arriba :) Commented el 5 sept. 2020 a las 8:18
0

.carousel-item{
  width: 100%;
  height: 400px;         
  background-image: url(https://images5.alphacoders.com/353/353018.jpg);
  /*  La imagen de fondo se reescala automáticamente con el cambio del ancho de ventana del navegador */
  background-size: cover;
   /* Para dejar la imagen de fondo centrada, vertical y horizontalmente */
background-position: center center;
   /* Para que la imagen de fondo no se repita */
   background-repeat: no-repeat;
   /* La imagen se fija en la ventana de visualización para que la altura de la imagen no supere a la del contenido */
 background-attachment: fixed;                      
}
@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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.