[SOLUCIONADO] El carousel de bootstrap ME ESTA MATANDO

[julia2021]

Hola mis amiguitos, he configurado el carousel (bandeja circular) de bootstrap tal cual como indican en getbootstrap.com y me funciona de las mil maravillas.

En problema es que mis imagenes tienen más altura que la configurada en el carousel y por lo tanto solo me aparece la parte de arriba de la imagen. La verdad es que la altura que tiene el carousel esta perfecta, pero no se como hacer para que me aparezca la imagen centrada dentro del carousel.

Quien sabrá apoyarme? Un beso grande a quien se atreva a ayudarme !!!

[AngelKrak]

eaaaa julia creo k a ti te vi en Taringa >_< jajaja xD bueno a lo que vine >_<
si lo que quieres es que aparesca toda la imagen completa, agregale esto a tu css:

Código CSS:

img {
width: 100%;
height: 100%;
}
 

o si no prueba con este:

Código CSS:

img {
width: 100%;
height: auto;
}
 

[julia2021]

Amiguito mio, te ganaste solo medio besito, te cuento por qué: al colocar el height al 100% o en auto siempre me va a aparecer la parte de arriba de la imagen, lo que deseo con todas mis ganas es ver la parte central de la imagen y no el tope.

Se te ocurre como hacerlo en el carousel ?
Me explico, imaginate que el caousel tiene 400px de altura, pero tus imagenes son todas de de 700px de altura, como le hago para que se visualice la parte central de la imagen en el carousel y no la parte de arriba ?

[mardojai]

XD

Tienes la web subida como para "husmear" el código en vivo y ver que solución dar?

[julia2021]

Claro amiguito, aqui lo tienes
La clase es: banner-altura-400

Código HTML:

.banner-altura-400 {
  height: 400px;
  width: 100%;}
 

Y el código php con bootstrap

Código HTML:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  </ol>
 
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active banner-altura-400">
      <img src="images/01.jpg" alt="imagen 01">
      <div class="carousel-caption">
        IMAGEN 01
      </div>
    </div>
    <div class="item banner-altura-400">
      <img src="imagen/02.jpg" alt="imagen 02">
      <div class="carousel-caption">
        IMAGEN 02
      </div>
    </div>
  </div>
 

[mardojai]

En lugar de insertar imagenes. Con "style" coloca las imágenes de fondo en cada div, y centrarlas.

Así:

Código:

.banner-altura-400 {
  height: 400px;
  width: 100%;}

Código:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  </ol>
 
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active banner-altura-400" style="background: url(imagen/01.jpg) center center;">
      <div class="carousel-caption">
        IMAGEN 01
      </div>
    </div>
    <div class="item banner-altura-400" style="background: url(imagen/02.jpg) center center;">      
      <div class="carousel-caption">
        IMAGEN 02
      </div>
    </div>
  </div>
</div>

Saludos!

[julia2021]

Mardojai eres mi sol, mi luz, eres lo MÁXIMO, me funciono a la primera, te has ganado un Gran BESOOOO !!!!!! Gracias mil !!!!!!!!!!!