1

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>

0

1 respuesta 1

0

Por lo que me doy cuenta, la imagen se ve muy estirada en dispositivos pequeños, esto se debe a que le estás dando una altura fija, y por más pequeña que sea la pantalla, la altura de esa imagen seguirá siendo la misma. Para solucionar esto, puedes darle sólo un ancho del 100% a la imagen y ya no una altura fija, para que la imagen ocupe el ancho máximo de la pantalla:

.w-100 {
  width: 100%;
}

También, éstas propiedades hacen que las flechas del carousel estén mal posicionadas, yo las quité y ahora se centran en la imagen:

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

Código completo:

.w-100 {
  width: 100%;
}
<!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 m-5" 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>


Puedes ver mejor el resultado aquí.

Tu Respuesta

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

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