Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] El carousel de bootstrap ME ESTA MATANDO

Estas en el tema de El carousel de bootstrap ME ESTA MATANDO en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/04/2015, 14:20
Avatar de julia2021  
Fecha de Ingreso: diciembre-2014
Ubicación: Mexico
Mensajes: 152
Antigüedad: 10 años
Puntos: 11
Sonrisa El carousel de bootstrap ME ESTA MATANDO

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 !!!
  #2 (permalink)  
Antiguo 06/04/2015, 14:32
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 10 años
Puntos: 91
Respuesta: El carousel de bootstrap ME ESTA MATANDO

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:
Ver original
  1. img {
  2. width: 100%;
  3. height: 100%;
  4. }

o si no prueba con este:
Código CSS:
Ver original
  1. img {
  2. width: 100%;
  3. height: auto;
  4. }
  #3 (permalink)  
Antiguo 06/04/2015, 15:36
Avatar de julia2021  
Fecha de Ingreso: diciembre-2014
Ubicación: Mexico
Mensajes: 152
Antigüedad: 10 años
Puntos: 11
Respuesta: El carousel de bootstrap ME ESTA MATANDO

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 ?

Última edición por julia2021; 06/04/2015 a las 15:46
  #4 (permalink)  
Antiguo 06/04/2015, 16:43
Avatar de mardojai  
Fecha de Ingreso: noviembre-2012
Ubicación: Lima, Perú
Mensajes: 137
Antigüedad: 12 años
Puntos: 44
Respuesta: El carousel de bootstrap ME ESTA MATANDO

XD

Tienes la web subida como para "husmear" el código en vivo y ver que solución dar?
__________________
El que supera a otros es poderoso, y el que se supera a sí mismo es invencible.
__________________
Si te sirvió puntúa.
  #5 (permalink)  
Antiguo 06/04/2015, 17:04
Avatar de julia2021  
Fecha de Ingreso: diciembre-2014
Ubicación: Mexico
Mensajes: 152
Antigüedad: 10 años
Puntos: 11
Respuesta: El carousel de bootstrap ME ESTA MATANDO

Claro amiguito, aqui lo tienes
La clase es: banner-altura-400
Código HTML:
Ver original
  1. .banner-altura-400 {
  2.   height: 400px;
  3.   width: 100%;}
Y el código php con bootstrap
Código HTML:
Ver original
  1. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  2.   <!-- Indicators -->
  3.   <ol class="carousel-indicators">
  4.     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  5.     <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  6.   </ol>
  7.  
  8.   <!-- Wrapper for slides -->
  9.   <div class="carousel-inner" role="listbox">
  10.     <div class="item active banner-altura-400">
  11.       <img src="images/01.jpg" alt="imagen 01">
  12.       <div class="carousel-caption">
  13.         IMAGEN 01
  14.       </div>
  15.     </div>
  16.     <div class="item banner-altura-400">
  17.       <img src="imagen/02.jpg" alt="imagen 02">
  18.       <div class="carousel-caption">
  19.         IMAGEN 02
  20.       </div>
  21.     </div>
  22.   </div>
  #6 (permalink)  
Antiguo 06/04/2015, 17:32
Avatar de mardojai  
Fecha de Ingreso: noviembre-2012
Ubicación: Lima, Perú
Mensajes: 137
Antigüedad: 12 años
Puntos: 44
Respuesta: El carousel de bootstrap ME ESTA MATANDO

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!
__________________
El que supera a otros es poderoso, y el que se supera a sí mismo es invencible.
__________________
Si te sirvió puntúa.
  #7 (permalink)  
Antiguo 06/04/2015, 17:37
Avatar de julia2021  
Fecha de Ingreso: diciembre-2014
Ubicación: Mexico
Mensajes: 152
Antigüedad: 10 años
Puntos: 11
De acuerdo Respuesta: El carousel de bootstrap ME ESTA MATANDO

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

Etiquetas: bandeja, bootstrap, circular
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:51.