Bootstrap – Altura carrusel responsive pero no dependiente del contenido

publicado por: Anonymous

Tengo un carrusel hecho con Bootstrap 4 pero tengo un problema. Cada slide cambia de altura porque aunque las imágenes tienen todas el mismo tamaño, el texto y botones que contiene cada slide es variable. ¿Podéis echarme una mano, por favor? Lo que necesito es que al cambiar de slide en cualquier tamaño de pantalla, la altura del carrusel sea siempre igual

HTML:

<section>
    <div id="carrusel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item slide1 active">
          <div class="container text-center">
            <h1 class="display-4 mb-4">Software para el sector energético</h1>
            <p class="lead">Si eres generador, distribuidor o comercializador de energía y quieres que tu software aporte un valor añadido a tu negocio, déjanos mostrarte lo que <strong>Divakia</strong> tiene para tí</p>
            <div class="btn-group mt-4" role="group" aria-label="button">
              <a class="btn btn-success btn-lg px-5" href="#contenidoPrincipal">SIAE</a>
              <a class="btn btn-light btn-lg px-4" href="servicios.html">Servicios</a>
            </div>
          </div>
        </div>

        <div class="carousel-item slide2">
          <div class="container text-center">
            <h1 class="display-4 mb-4">Software responsive multidispositivo</h1>
            <p class="lead">Sabemos que hoy en día el trabajo debe realizarse desde cualquier lugar del planeta. Por eso nuestros aplicativos son totalmente operativos en la gran mayoría de los dispositivos. Para que puedas trabajar con la misma facilidad y seguridad estés donde estés</p>
          </div>
        </div>

        <div class="carousel-item slide3">
          <div class="container text-center">
            <h1 class="display-4 mb-4">La calidad es nuestra razón de ser</h1>
            <p class="lead">Si lo que quieres es recibir un servicio de calidad, cercano y con un alto valor añadido para tu negocio, no dudes en hablar con Divakia. Nuestro objetivo es hacer que todo sea más fácil, eficiente y flexible para nuestros clientes</p>
          </div>
        </div>

      </div>
        <a class="carousel-control-prev" href="#carrusel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previo</span>
      </a>
      <a class="carousel-control-next" href="#carrusel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Siguiente</span>
      </a>
    </div>
</section>

y el css de los slides es:

.slide1 {
    background-size: cover;
    background: linear-gradient(#666, transparent 90%),
                linear-gradient(0deg, #222, transparent),
                #fff url('../img/jumbotron_bg.jpg') no-repeat center;
}

.slide2 {
    background-size: cover;
    background: linear-gradient(#666, transparent 90%),
                linear-gradient(0deg, #222, transparent),
                #fff url('../img/responsive.jpg') no-repeat center;
}

.slide3 {
    background-size: cover;
    background: linear-gradient(#666, transparent 90%),
                linear-gradient(0deg, #222, transparent),
                #fff url('../img/molinos.jpg') no-repeat center;
}

solución

El problema que vi es que las imágenes no son por el tag <img/> sino son un background esto hace que los .carousel-item se ajusten al texto y no a la imagen, la solución que vi fue recorrer cada .carousel-item y ver cual era el de mayor tamaño y una vez detectado setearlo el min-height para todos y así estén todos del mismo tamaño, se supone que al setearle la altura a todos con respecto al de mayor altura no tendrías problema:

_x000D_

_x000D_

var alto = 0;_x000D_
$("#carrusel .carousel-item").each(function(index,elemento){_x000D_
_x000D_
  if(alto < $(elemento).height()){_x000D_
    alto = $(elemento).height();_x000D_
  }_x000D_
_x000D_
});_x000D_
_x000D_
$("#carrusel .carousel-item").css("min-height",alto);

_x000D_

.slide1 {_x000D_
    background-size: cover;_x000D_
    background: linear-gradient(#666, transparent 90%),_x000D_
                linear-gradient(0deg, #222, transparent),_x000D_
                #fff url('../img/jumbotron_bg.jpg') no-repeat center;_x000D_
}_x000D_
_x000D_
.slide2 {_x000D_
    background-size: cover;_x000D_
    background: linear-gradient(#666, transparent 90%),_x000D_
                linear-gradient(0deg, #222, transparent),_x000D_
                #fff url('../img/responsive.jpg') no-repeat center;_x000D_
}_x000D_
_x000D_
.slide3 {_x000D_
    background-size: cover;_x000D_
    background: linear-gradient(#666, transparent 90%),_x000D_
                linear-gradient(0deg, #222, transparent),_x000D_
                #fff url('../img/molinos.jpg') no-repeat center;_x000D_
}

_x000D_

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">_x000D_
_x000D_
<section>_x000D_
    <div id="carrusel" class="carousel slide" data-ride="carousel">_x000D_
      <div class="carousel-inner">_x000D_
        <div class="carousel-item slide1 active">_x000D_
          <div class="container text-center">_x000D_
            <h1 class="display-4 mb-4">Software para el sector energético</h1>_x000D_
            <p class="lead">Si eres generador, distribuidor o comercializador de energía y quieres que tu software aporte un valor añadido a tu negocio, déjanos mostrarte lo que <strong>Divakia</strong> tiene para tí</p>_x000D_
            <div class="btn-group mt-4" role="group" aria-label="button">_x000D_
              <a class="btn btn-success btn-lg px-5" href="#contenidoPrincipal">SIAE</a>_x000D_
              <a class="btn btn-light btn-lg px-4" href="servicios.html">Servicios</a>_x000D_
            </div>_x000D_
          </div>_x000D_
        </div>_x000D_
_x000D_
        <div class="carousel-item slide2">_x000D_
          <div class="container text-center">_x000D_
            <h1 class="display-4 mb-4">Software responsive multidispositivo</h1>_x000D_
            <p class="lead">Sabemos que hoy en día el trabajo debe realizarse desde cualquier lugar del planeta. Por eso nuestros aplicativos son totalmente operativos en la gran mayoría de los dispositivos. Para que puedas trabajar con la misma facilidad y seguridad estés donde estés</p>_x000D_
          </div>_x000D_
        </div>_x000D_
_x000D_
        <div class="carousel-item slide3">_x000D_
          <div class="container text-center">_x000D_
            <h1 class="display-4 mb-4">La calidad es nuestra razón de ser</h1>_x000D_
            <p class="lead">Si lo que quieres es recibir un servicio de calidad, cercano y con un alto valor añadido para tu negocio, no dudes en hablar con Divakia. Nuestro objetivo es hacer que todo sea más fácil, eficiente y flexible para nuestros clientes</p>_x000D_
          </div>_x000D_
        </div>_x000D_
_x000D_
      </div>_x000D_
        <a class="carousel-control-prev" href="#carrusel" role="button" data-slide="prev">_x000D_
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>_x000D_
        <span class="sr-only">Previo</span>_x000D_
      </a>_x000D_
      <a class="carousel-control-next" href="#carrusel" role="button" data-slide="next">_x000D_
        <span class="carousel-control-next-icon" aria-hidden="true"></span>_x000D_
        <span class="sr-only">Siguiente</span>_x000D_
      </a>_x000D_
    </div>_x000D_
</section>_x000D_
_x000D_
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>_x000D_
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

_x000D_

_x000D_

_x000D_

Espero te sea de utilidad.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *